首页 前端知识 JQuery(一)页面加载,写入文本,对象转换,隐藏显示,基本选择器,层级选择器,基本过滤选择器,表单选择器,class操作,属性操作

JQuery(一)页面加载,写入文本,对象转换,隐藏显示,基本选择器,层级选择器,基本过滤选择器,表单选择器,class操作,属性操作

2024-07-29 00:07:15 前端知识 前端哥 731 302 我要收藏

JQuery优点:

1)轻巧方便
2)强大的选择器
3)出色的DOM操作的封装
4)可靠的事件处理机制
5)出色浏览器兼容性
6)不污染顶级变量
7)完善的AJAX
8)开源

jQuery的引入方式
jQuery它是一个库(框架),要想使用它,必须先引入!
jQuery-1.8.3.js:一般用于学习阶段。
实际项目中根据具体情况而定,一般使用压缩版(.min.js)
引入语法:<script type=”text/javascript” src=”js/jquery-1.8.3.js”></script>

window.onload和jquery的ready函数的主要区别:
1.onload事件只能执行一个函数。如果多次绑定onload事件,则后面绑定的会覆盖之前的。因此只能执行一个函数;而ready函数可以调用多次,执行多个函数。
2.onload是当页面所有内容都加载完毕时才调用。如果页面中存在大的图片或者视频,则也必须等到加载完毕才能执行调用的函数;而ready是当页面主要元素加在完毕后执行,大的图片和视频等元素则未必加载完毕,这样用户体验度会更好一些,不用等待过长时间。

 例子:jQuery的页面加载

<script type="text/javascript">   
  //原来的JavaScript的写法,页面加载函数
    //一个页面只加载一次,之后的会覆盖掉之前页面加载函数
    window.onload=function(){
        //提示信息
        alert("windowhello");
    }
    window.onload=function(){
        //提示信息
        alert("windowhello1");
    }
  //现在用JQ的写法,页面加载函数,$表示JQuery($和JQuery两个都可以用)
    //标准写法
    $(document).ready(function(){
        alert("hello");
    })
    jQuery(document).ready(function(){
        alert("hellojq");
    })
    $(document).ready(function(){
        alert("hello1");
    })
//简易写法
    //JQ不会覆盖,是按照顺序一个个加载
    $(function(){
        alert("hello");
    })    
</script>

JQ的获取:

    //JS写法
  window.onload=function(){
        var btn1=document.getElementById("btn1");
        alert(btn1.value)
    }
    //JQ写法
    $(function(){
        var btn2=$("#btn2");
        alert(btn2.val());
        var btn2=$("#btn2").val();
        alert(btn2);
    })

在文本框中写入文本两种方法:

html写入文本输入:会按照html读取解析文本

text写入文本输入:会直接写入文本

    //添加点击事件
    //JS
    window.onload=function(){
        var btn1=document.getElementById("btn1");
        btn1.onclick=function(){
            //输入innerhtml
            //获取span
            document.getElementById("span1").innerHTML="hello"
        }
    }
    JQ
    $(function(){
        $("#btn1").click(function(){
            //获取span
            //html写入文本输入:会按照html读取解析文本
            $("#span1").html("<a href='hello.html'>hellojq</a>");
            //text写入文本输入:会直接写入文本
            $("#span1").text("<a href='hello.html'>hellojq</a>");
        })
    })

jQuery对象与DOM对象转换
jQuery对象和DOM对象是相互独立的,可以相互转换,但是两个对象的函数不能混淆使用(这点一定要谨记)。
将DOM对象转换为jQuery对象,语法:jQuery(dom对象)或者$(dom对象)
将jQuery对象转换为DOM对象,语法:$jquery对象名[index]或者$jquery对象名.get(index)。

//JS写法
    window.onload=function(){
        //添加点击事件
        document.getElementById("btn1").onclick=function(){
            //获取span对象----DOM对象
            var dom=document.getElementById("span1");
            //把DOM对象转换为jQuery对象  格式:jQuery(dom对象)或者$(dom对象)
            $(dom).html("<a href='#'>hello JavaScript</a>");
            //DOM对象能否使用jQuery函数吗?比如jQuery.html()
            dom.html("<a href='#'>hello JavaScript</a>");
            //得出结论:DOM对象不能直接使用jQuery函数和属性
        }
    }
            
    //JQ写法
    $(function(){
        //添加点击事件
        $("#btn2").click(function(){
            //获取到span对象----jQuery对象
            //方式一:$对象名[index]----DOM对象
                    $("#span1")[0].innerHTML="hellojq1"
            //方式二:$对象名.get(index)
                    $("#span1").get(0).innerHTML="hellojq2"
            //jQuery对象能否直接操作JavaScript的方法和属性吗?比如innerHTML
            $("#span1").innerHTML="hello jQuery";
            //得出结论:jQuery对象不能直接操作JavaScript的方法和属性
        })
    })


jQuery效果
1.基本显示和隐藏效果
  show(speed,fn):显示某元素
    参数speed:显示速度,单位毫秒。也可使用固定字符串:slow,normal,fast
    参数fn:显示成功之后的回调函数
  hide(speed,fn):隐藏某元素
    参数同上
  toggle(speed,fn):切换显示和隐藏效果,即如果元素隐藏,则使用该方法后则显示,反之则隐藏。
2.滑动效果
  slideDown():元素显示,高度逐渐变高,直到设置值。
  slideUp():元素隐藏,高度逐渐变小,直到高度为0,元素隐藏。
  slideToggle():切换隐藏和显示效果
3.淡入淡出效果
  fadeIn():元素显示。从透明一直到完全不透明。
  fadeout():元素隐藏。从完全不透明到完全透明再隐藏。
  fadeToggle():切换显示隐藏效果
  fadeTo(speed,opacity,[fn]):指定透明度
    第二个参数opacity取值0-1之间数值;

例子:轮辐广告,图片显示和隐藏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <!--引入jq框架-->
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            var timer;
            //页面加载函数
            $(function(){
                //图片轮播的定时器
                setInterval("changeImg()",3000);
                setInterval("showImg()",3000);
            })
            //图片轮播具体的实现方法
            var num=1;
            function changeImg(){
                if(num>3){
                    num=1;
                }
                //获取图片的标签
                document.getElementById("imgId").src="img/"+num+".jpg";
                num++;
            }
            
            
            //弹出图片的方法
            function showImg(){
                //获取图片的标签  显示用show(),括号中填写的是显示的时间长度
//                $("#showImg").show(5000);//注意单位是毫秒
                //滑动显示
//                $("#showImg").slideDown(5000);
                //淡入显示:fadeIn()
                $("#showImg").fadeIn(2000);
                //清除显示广告的定时器
                clearInterval(timer);
                //隐藏图片的定时器
                timer = setInterval("hiddenImg()",2000);
            }
            
            function hiddenImg(){
                //获取到图片的标签
                //$("#showImg").hide(5000);//注意单位是毫秒
                //滑动隐藏:slideUP()
                $("#showImg").slideUp(2000);
                //淡出隐藏:fadeOut()
                //$("#showImg").fadeOut(5000);
                //清除隐藏广告的定时器
                clearInterval(timer);
            }
            
        </script>
        <title></title>
    </head>
    <body>
        <!--弹出广告图片-->
        <div>
            <!--行内先设置图片隐藏-->
            <img id="showImg" src="img/sh.jpg" width="100%" style="display: none;"/>
        </div>
        <!--图片轮播-->
        <div>
            <img id="imgId" src="img/1.jpg" width="100%" />
        </div>
        <div>
            <a href="#">首页</a>
            <a href="#">手机数码</a>
            <a href="#">零食</a>
        </div>
    </body>
</html>

隐藏和显示互换toggle:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                //给按钮添加点击时间
                $("#btn1").click(function(){
                    //获取图片标签
                    //
//                    $("#showImg").toggle(2000);
                    //
                    $("#showImg").slideToggle(2000);
                    //
//                    $("#showImg").fadeToggle(2000);
                })
            })
        </script>
        <title></title>
    </head>
    <body>
        <input type="button" name="" id="btn1" value="点一下显示/点一下隐藏" />
        <br>
        <img id="showImg" src="img/1.jpg" width="100%" />
    </body>
</html>

jQuery基本选择器:
id选择器:$(“#id名称”);
元素选择器:$(“元素名称”);
类选择器:$(“.类名”);
通配符:*
多个选择器共用(并集)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
            <script type="text/javascript">
                $(function(){
                    //获取按钮的点击事件
                    $("#btn1").click(function(){
                        //id选择器:&("#id的名称")
                        $("#one").css("background-color","red")
                    })
                    $("#btn1").click(function(){
                        //类选择器:$(".类名")
                        $(".min").css("background-color","blue");
                    })
                    $("#btn3").click(function(){
                        //元素选择器:$("元素名称")
                        $("div").css("background-color","yellow");
                    })
                    $("#btn4").click(function(){
                        //元素选择器:$("*")通配符:整个页面
                        $("*").css("background-color","pink");
                    })
                    $("#btn5").click(function(){
                        //元素选择器:$("元素名称,元素名称"):求并集
                        $("#two,.min222").css("background-color","orange");
                    })
                })
            </script>
        <title></title>
    </head>
    <body>
        <input id="btn1" type="button" value="选择为one的元素"/>
        <input id="btn2" type="button" value="选择样式为min的元素"/>
        <input id="btn3" type="button" value="选择所有div的元素"/>
        <input id="btn4" type="button" value="选择所有元素"/>
        <input id="btn5" type="button" value="选择id为two或者样式为min222的元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
        </span>
    </body>
</html>

层级选择器
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    //ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
                    $("body div").css("background-color","red");
                })
                
                $("#btn2").click(function(){
                    //parent > child : 在给定的父元素下匹配所有的子元素(儿子)
                    $("body>div").css("background-color","blue");
                })
                
                $("#btn3").click(function(){
                    //prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的,同桌)
                    $("#two+div").css("background-color","yellow");
                })
                
                $("#btn4").click(function(){
                    //prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)
                    $("#two~div").css("background-color","pink");
                })
            })
        </script>
        <title></title>
    </head>
    <body>
        <input id="btn1" type="button" value="选择body中所有的后代为div的元素"/>
        <input id="btn2" type="button" value="选择body中儿子级别的div元素"/>
        <input id="btn3" type="button" value="选择id为two的下一个元素"/>
        <input id="btn4" type="button" value="选择id为two的兄弟元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
            <div class="min">8888</div>
        </span>
        <div id="five">
            <div class="min">9999</div>
        </div>
    </body>
</html>

基本过滤选择器
  基本:
    :first
    :last
    :not
    :even
    :odd
    :eq
    :gt
    :lt
    :header
    :animated
  内容:
    :contains
    :empty
    :has
    :parent
  可见性:
    :hidden
    :visible

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery基本过滤选择器页面</title>
        <!--要想使用jQuery,必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //获取按钮的点击事件
                $("#btn1").click(function(){
                    //:first第一个元素
                    $("body div:first").css("background-color","red");
                })
                $("#btn2").click(function(){
                    //:last最后一个元素
                    $("body div:last").css("background-color","blue");
                })
                $("#btn3").click(function(){
                    //:even偶数元素  索引是从0开始的
                    //父类中的所有的元素同时进行排序,不管是儿子还是孙子
                    $("body div:even").css("background-color","yellow");
                })
                $("#btn4").click(function(){
                    //:odd奇数元素
                    $("body div:odd").css("background-color","pink");
                })
                
            })
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="选择body中第一个div的元素"/>
        <input id="btn2" type="button" value="选择body中最后一个div元素"/>
        <input id="btn3" type="button" value="选择body中偶数div元素"/>
        <input id="btn4" type="button" value="选择body中奇数div元素"/>
        <hr />
        <div id="one">
            <div class="min">1111</div>
        </div>
        <div id="two">
            <div class="min">2222</div>
            <div class="min222">3333</div>
        </div>
        <div id="three">
            <div class="min">4444</div>
            <div class="min">5555</div>
            <div class="min">6666</div>
        </div>
        <span id="four">
            7777
            <div class="min">8888</div>
        </span>
        <div id="five">
            <div class="min">9999</div>
        </div>
    </body>
</html>

表单选择器
  表单:
    :input
    :text
    :password
    :radio
    :chackbox
    :submit
    :image
    :reset
    :button
    :file
    :hidden
  表单对象属性:
    :enabled
    :disabled
    :checked
    :selected

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>jQuery表单选择器页面</title>
        <!--要想使用jQuery,必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //获取按钮的点击事件
                $("#btn1").click(function(){
                    $(":input").css("background-color","red");
                })
                $("#btn2").click(function(){
                    $(":text").css("background-color","blue");
                })
                $("#btn3").click(function(){
                    var num = $(":radio").size();
                    alert(num);
                })
                $("#btn4").click(function(){
                    var num = $(":checkbox").size();
                    alert(num);
                })
            })    
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="选择所有input元素"/>
        <input id="btn2" type="button" value="选择text文本框元素"/>
        <input id="btn3" type="button" value="选择单选元素"/>
        <input id="btn4" type="button" value="选择多选元素"/>
        <hr />
        <form>
            <input type="text"/><br />
            <input type="password"/><br />
            <input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br />
            <input type="checkbox"/>篮球<input type="checkbox"/>足球<input type="checkbox"/>排球<br />
            <input type="submit"/><br />
            <input type="file"/><br />
            <input type="image"/><br />
            <input type="reset"/><br />
            <input type="button" value="普通按钮"/><br />
            <input type="hidden"/>
        </form>
    </body>
</html>

例子:使用jQuery完成表格隔行换色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>使用jQuery完成表格隔行换色</title>
        <!--要想使用jQuery,必须先引入-->
        <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
        <style>
            .even{
                background-color: yellow;
            }
            .odd{
                background-color: pink;
            }
        </style>
        <script type="text/javascript">
            //页面加载函数
            $(function(){
                //用JavaScript的写法获取表格行数对象
                //tBodie[0].rows[i]//获取行数
                //$("tbody>tr:even").css("background-color","yellow");
                //$("tbody>tr:odd").css("background-color","pink");
                //addClass():添加写好的样式
                $("tbody>tr:even").addClass("even");
                $("tbody>tr:odd").addClass("odd");;
            })    
        </script>
    </head>
    <body>
        <table border="1" width="600" height="500" cellspacing="0.5" align="center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>45</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>马六</td>
                    <td>71</td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>黄七</td>
                    <td>18</td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>田九</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

class操作

  addClass():给指定元素追加class属性样式
  removeClass():将指定元素的class属性移除
  toggleClass():切换class属性样式,即没有该class属性则添加,有该class属性则移除

属性操作:

  prop():

  attr(name):取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性,则返回 undefined 。

  attr(properties):将一个“名/值”形式的对象设置为所有匹配元素的属性。

          这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意,如果你要设置对象的class属性,你必须使用'className' 作为属性名。或者你可以直接使用.addClass( class ) 和 .removeClass( class ).

  attr(key,value):为所有匹配的元素设置一个属性值。

  attr(key,fn):为所有匹配的元素设置一个计算的属性值。

        不提供值,而是提供一个函数,由这个函数计算的值作为属性值。

  removeAttr(name):从每一个匹配的元素中删除一个属性

  prop():操作元素的特性。获取一些第一次分配undefined属性值的标签,如果抛异常,将忽略浏览器生成的任何错误。
  removeProp():移除标签的特性。

attr(name)使用方法:

<img src="test.jpg"/>

$("img").attr("src");

结果:test.jpg

attr(properties)的使用方法:

HTML 代码:
<img/>
jQuery 代码:
$("img").attr({ src: "test.jpg", alt: "Test Image" });
结果:
[ <img src= "test.jpg"  alt:="Test Image" /> ]

attr(key,value)的使用方法:

<img/> 

<img/>

$("img").attr("src","test.jpg");

结果:[ <img src= "test.jpg" /> , <img src= "test.jpg" /> ]

attr(key,fn)的使用方法:

<img src="test.jpg"/>

$("img").attr("title", function() { return this.src });

结果:<img src="test.jpg" title="test.jpg" />

removeAttr(name):

<img src="test.jpg"/>

$("img").removeAttr("src");

结果:[ <img /> ]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14528.html
标签
评论
发布的文章

Unity数据持久化之Json

2024-08-10 22:08:00

simdjson 高性能JSON解析C 库

2024-08-10 22:08:00

npm常用命令详解(一)

2024-08-10 22:08:34

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!