jquery入门介绍

其他 2018-08-29 21:18:28 阅读次数: 0

一、jQuery简介及入门

jQuery是javascript的一个轻量级框架，对javascript进行封装，它提供了很多方便的选择器。供你快速定位到需要操作的元素上面去。还提供了很多便捷的方法。

1，使用方式 将jQuery对应的js库下载，并导入到我们的项目下，在html页面使用<script>导入即可

    语法：jQuery(选择器)或者$(选择器)
    jQuery对象建议使用$开头，区分大小写
    //单行注释
    /*块注释*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQ入门</title>
    <!--第一步引入-->
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <!--<script src="../js/jquery-1.8.3.js"></script>-->
    <script>
        $(function () {
            alert("hello jquery!")
        });
    </script>
</head>
<body>

</body>
</html>

2，JQ页面加载与JS页面加载的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS于JQ页面的区别</title>
    <!--<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>-->
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <script>
        window.onload = function () {
            alert("张三");
        }
        //传统方式覆盖
        window.onload = function () {
            alert("老王");
        }

        //1.8的加载速度比传统方式快，3.0的加载比传统方式慢
        jQuery(document).ready(function(){
           alert("李四")
        });

        //jq不存在覆盖，顺序执行
        $(document).ready(function(){
           alert("王五")
        });

        //简写方式
        $(function(){
            alert("田七");
        });

    </script>
</head>
<body>
</body>
</html>

3，js的获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq的获取</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <script>
        $(function(){
            //1,传统方式
            /*document.getElementById("btn").onclick = function(){
                location.href="demo1.html";
            };*/

            //2,JQ方式获取
            $("#btn").click(function(){
                location.href="demo1.html";
            });

        });
    </script>
</head>
<body>
<input type="button" value="点我有惊喜" id="btn">
</body>
</html>

二，DOM对象与JQ对象转换

1，jquery对象和js对象是不一样的，但是二者能够相互转换

js对象转jQuery对象

语法 ：$(js对象);

jQuery对象转js对象，jquery对象类似一个数组的存在，内部存放着多个js对象

语法：jQuery对象.get(index) 或者jquery对象[index]

2，jquery对象只能使用jQuery对象的方法，js对象只能使用js对象的方法

alert(mydiv.innerHTML);
alert($mydiv.html());

3，jquery对象和js对象中的事件绑定方式不一样。

js中事件的绑定方式：
js.事件名=function(){}

jquery中事件的绑定
jquery标签对象.事件名(function(){});

4，jquery的页面加载完成事件和js的页面加载完成事件写法不一样。

window.onload = function(ev){}
$(document).ready(function(){});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <script>
        function write1(){
            //1，js的dom操作
            // document.getElementById("span1").innerHTML="抢红包";
            //Dom对象无法操作JQ对象里面的属性和方法
            //document.getElementById("span1").html("发红包");

            var spanEle = document.getElementById("span1");

            //将DOM对象转换成JQ对象
            $(spanEle).html("发红包啦")

        }

        $(function(){
            $("#btn").click(function(){
                //JQ对象无法操作js里面的属性和方法！！
               // $("#span1").innerHTML="又发红包";
                $("#span1").html("不发红包");

                //JQ对象想DOM对象转换方式一
                $("#span1").get(0).innerHTML="辛苦了";

                //JQ对象向DOM对象转换方式二
                $("#span1")[0].innerHTML="哈哈！";
            });
        });
    </script>
</head>
<body>
<input type="button" value="js写入" onclick="write1()">
<input type="button" value="JQ写入" id="btn"><br/>
    群主<span id="span1">发红包</span>

</body>
</html>

案例代码：使用jq完成首页定时弹广告效果
需求分析
第一步：引入jQuery相关的文件
第二步：书写页面加载函数
第三步：在页面加载函数中，获取显示广告图片的元素。
第四步：设置定时操作(显示广告图片的函数)
第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())
第六步：清除显示广告图片的定时操作
第七步：设置定时操作(隐藏广告图片的函数)
第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())
第九步：清除隐藏广告图片的定时操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <script>
        $(function(){
            //1.书写显示广告图片的定时操作
            time = setInterval("showAd()",3000);
        });

        //2.书写显示广告图片的函数
        function showAd(){
            //3.获取广告图片，并让其显示
            // $("#img2").show(1000);
            $("#img2").slideDown(5000);
            // $("#img2").fadeIn(4000);
            //4.清除显示图片定时操作
            clearInterval(time);
            //5.设置隐藏图片的定时操作
            time = setInterval("hiddenAd()",3000);
        }

        function hiddenAd(){
            //6.获取广告图片，并让其隐藏
            // $("#img2").hide();
            $("#img2").slideUp(5000);
            // $("#img2").fadeOut(6000);
            //7.清除隐藏图片的定时操作
            clearInterval(time);
        }
    </script>
</head>
<body>
    <div id="father">
        <!--定时弹出广告图片位置-->
        <img src="../img/ad.jpg" width="100%" style="display: none" id="img2"/>
    </div>
    <h1>广告来啦</h1>
</body>
</html>

toggle的使用 点击按钮显示和隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>toggle的使用</title>
    <style>
        div{
            border: 1px solid white;
            width: 500px;
            height: 350px;
            margin: auto;
            text-align: center;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-3.0.0.js" ></script>
    <script>
        $(function(){
            $("#btn").click(function(){
                $("#img1").toggle();
            });
        });
    </script>
</head>
<body>
<div>
    <input type="button" value="显示/隐藏" id="btn" /><br />|
    <img src="../img/飞机05.gif" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>

5，jquery常用事件

三，JQ的选择器

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

 选择器 使用示例 说明 基本选择器，层级选择器，属性选择器，基本过滤选择器，表单属性选择器等

案例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>基本选择器</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-3.0.0.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("#one").css("background-color","pink");
                });
                
                $("#btn2").click(function(){
                    $(".mini").css("background-color","pink");
                });
                
                $("#btn3").click(function(){
                    $("div").css("background-color","pink");
                });
                
                $("#btn4").click(function(){
                    $("*").css("background-color","pink");
                });
                
                $("#btn5").click(function(){
                    $("#two,.mini").css("background-color","pink");
                });
            });
        </script>
            
    </head>
    <body>
        <input type="button" id="btn1" value="选择为one的元素"/>
        <input type="button" id="btn2" value="选择样式为mini的元素"/>
        <input type="button" id="btn3" value="选择所有的div元素"/>
        <input type="button" id="btn4" value="选择所有元素"/>
        <input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

2，层级选择器 ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

$("A").siblings("B");一般兄弟，兄弟元素选择器 ：匹配所有的（之前+之后）兄弟元素 根据元素之间的层级关系进行选择。

案例代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-3.0.0.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("body div").css("background-color","gold");
                });
                
                $("#btn2").click(function(){
                    $("body>div").css("background-color","gold");
                });
                
                $("#btn3").click(function(){
                    $("#two+div").css("background-color","gold");
                });
                
                $("#btn4").click(function(){
                    $("#one~div").css("background-color","gold");
                });
            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="选择body中的所有的div元素"/>
        <input type="button" id="btn2" value="选择body中的第一级的孩子"/>
        <input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
        <input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

3，基本过滤器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-3.0.0.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("body div:first").css("background-color","red");
                });
                
                $("#btn2").click(function(){
                    $("body div:last").css("background-color","red");
                });
                
                $("#btn3").click(function(){
                    $("body div:odd").css("background-color","red");
                });
                
                $("#btn4").click(function(){
                    $("body div:even").css("background-color","red");
                });

            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="body中的第一个div元素"/>
        <input type="button" id="btn2" value="body中的最后一个div元素"/>
        <input type="button" id="btn3" value="选择body中的奇数的div"/>
        <input type="button" id="btn4" value="选择body中的偶数的div"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

4，属性选择器 属性过滤选择器的作用：1.先选中；2.再根据属性过滤出想要的元素；

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <link rel="stylesheet" href="../css/style.css" />
        <script type="text/javascript" src="../js/jquery-3.0.0.js" ></script>
        <script>
            $(function(){
                $("#btn1").click(function(){
                    $("div[id]").css("background-color","red");
                });
                
                $("#btn2").click(function(){
                    $("div[id='two']").css("background-color","red");
                });
                
            });
        </script>
        
        
    </head>
    <body>
        <input type="button" id="btn1" value="选择有id属性的div"/>
        <input type="button" id="btn2" value="选择有id属性的值为two的div"/>
        
        <hr/>
        <div id="one">
            <div class="mini">
                111
            </div>
        </div>
        
        <div id="two">
            <div class="mini">
                222
            </div>
            <div class="mini">
                333
            </div>
        </div>
        
        <div id="three">
            <div class="mini">
                444
            </div>
            <div class="mini">
                555
            </div>
            <div class="mini">
                666
            </div>
        </div>
        
        <span id="four">
            
        </span>
    </body>
</html>

5，表单选择器 根据表单子标签的type属性进行过滤。目前只需要大家知道:input选择器选中的标签有哪些。其余的都可以使用属性过滤选择器来代替。

【案例】过滤出表单子标签中type="image"的标签

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>09-表单选择器.html</title>
        <!--   引入jQuery -->
        <script src="../../js/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript">
            $(function () {
               $("#btn1").click(function () {
                  var length = $(":radio").length;
                  alert(length);
               });
            });
        </script>
    </head>

    <body>
    <input type="button" value="选��所有的表单子元素" id="btn1" /><br />

        <form id="form1" action="#">
            <input type="button" value="Button" /><br/>
            <input type="checkbox" name="c" />1
            <input type="checkbox" name="c" />2
            <input type="checkbox" name="c" />3<br/>
            <input type="file" /><br/>
            <input type="hidden" /><br/>
            <input type="image" src="1.jpg" /><br/>
            <input type="password" /><br/>
            <input type="radio" name="a" />1
            <input type="radio" name="a" />2<br/>
            <input type="reset" /><br/>
            <input type="submit" value="提交" /><br/>
            <input type="text" /><br/>
            <select>
                <option>Option</option>
            </select><br/>
            <textarea rows="5" cols="20"></textarea><br/>
            <button>Button</button><br/>
        </form>

        <div></div>
    </body>

</html>

6，表单对象过滤选择器 表单对象属性过滤选择器是根据表单元素的某些属性来进行过滤选择的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>表单对象属性过滤选择器.html</title>
        <script src="../../js/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    $("input:enabled").val("赋值");
                });
                $("#btn2").click(function () {
                   $("input:disabled").val("不可赋值");
                });
                $("#btn3").click(function () {
                   var length=$("input[type='checkbox']:checked").length;
                   alert(length);
                });
                $("#btn4").click(function () {
                   var length= $("option:selected").length;
                   alert(length);
                });
            });
        </script>
    </head>

    <body>
        <h3> 表单对象属性过滤选择器.</h3>
        <br />
        <button id="btn1">对表单内 可用input 赋值操作.</button>
        <button id="btn2">对表单内 不可用input 赋值操作.</button>
        <button id="btn3">获取多选框选中的个数.</button>
        <button id="btn4">获取下拉框选中的个数.</button>
        <br />
        可用元素：<input name="add" value="可用文本框" /> <br/>
        不可用元素：<input name="email" disabled="disabled" value="不可用文本框" /><br/>
        可用元素： <input name="che" value="可用文本框" /><br/>
        不可用元素：<input name="name" disabled="disabled" value="不可用文本框" /><br/>
        多选框：
        <br/>
        <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
        <input type="checkbox" name="newsletter" value="test2" />test2
        <input type="checkbox" name="newsletter" value="test3" />test3
        <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
        <input type="checkbox" name="newsletter" value="test5" />test5
        <br/><br/> 下拉列表1：
        <br/>
        <select name="test" multiple="multiple" style="height:100px">
            <option>浙江</option>
            <option selected="selected">湖南</option>
            <option>北京</option>
            <option selected="selected">天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>

        <br/><br/> 下拉列表2：
        <br/>
        <select name="test2">
            <option>浙江</option>
            <option>湖南</option>
            <option selected="selected">北京</option>
            <option>天津</option>
            <option>广州</option>
            <option>湖北</option>
        </select>
        <br/><br/>
    </body>

</html>

7，可见性过滤选择器

$("input:visible"),$("input:hidden")

隐藏域： ；

diaplay属性隐藏： ;

可见性过滤选择器是根据标签是否可见进行过滤的，页面上能够看见的标签都是可见的。不可见的标签主要包括以下两种：

  1. 隐藏域：<input type="hidden" name="id" value="520"> ；
  2. diaplay属性隐藏：<div style="display:none"></div> ;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>05-可见性过滤选择器.html</title>
        <!--   引入jQuery -->
        <script src="../../js/jquery-3.3.1.js"></script>
        <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
        <style>
            div.hide{
                display: none;
                height: 200px;
                width: 200px;
                border: 1px solid red;
            }
        </style>
        <script type="text/javascript">
            $(function () {
                $("#b1").click(function () {
                   $("div:visible").css("background-color","yellow");
                });
                $("#b2").click(function () {
                    $("div:hidden").show().css("background-color","yellow");
                });
            });
        </script>
    </head>

    <body>
        <h3>可见性过滤选择器.</h3>
        <button id="reset">手动重置页面元素</button>
        <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label>
        <br/><br/>
        <input type="button" value=" 选取所有可见的div元素" id="b1" />
        <input type="button" value=" 选取所有不可见的div元素, 利用 jQuery 中的 show() 方法将它们显示出来" id="b2" />

        <br /><br />

        <div class="one" id="one">
            id为one,class为one的div
            <div class="mini">class为mini</div>
        </div>

        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div.
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>

        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>

        <div style="display:none;" class="none">style的display为"none"的div</div>

        <div class="hide">class为"hide"的div</div>

    </body>

</html>

8，内容过滤选择器 内容过滤选择器是根据标签中时候包含有某些内容，来对选择的标签进行过滤的。语法格式：$("div:has(selector)") 。例如：

$("div:has('selector')")
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>04-内容过滤选择器.html</title>
    <!--   引入jQuery -->
    <script src="../../js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <script type="text/javascript">
        $(function () {
            $("#reset").click(function () {
                this.reset;
            });

            $("#btn1").click(function () {
               $("div:has(.mini)").css("background-color","yellow");
            });
        });
    </script>
</head>

    <body>
        <h3>内容过滤选择器.</h3>
        <button id="reset">手动重置页面元素</button>
        <input type="checkbox" id="isreset" checked="checked" /><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

        <input type="button" value="选取含有class为mini元素 的div元素." id="btn1" />

        <br /><br />

        <!-- 测试的元素 -->
        <div class="one" id="one">
            id为one,class为one的div
            <div class="mini">class为mini</div>
        </div>

        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div.
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>

        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>

        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>

        <div style="display:none;" class="none">style的display为"none"的div</div>

        <div class="hide">class为"hide"的div</div>

        <div>
            包含input的type为"hidden"的div<input type="hidden" size="8" />
        </div>

        <span id="mover">正在执行动画的span元素.</span>

    </body>

</html>

四，dom对象的操作

0，dom对象的操作

1，html代码/文本/值操作
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        
    </head>
    <body>
        <input id="myinput" type="text" name="username" value="张三" /><br />
        <div id="mydiv"><p><a href="#">标题标签</a></p></div>
        <input type="radio" name="sex" value="male">
    </body>
    <script src="../js/jquery-3.3.1.js"></script>
    <script>
        /**
         * 注意：在jquery中，绝大多数的方法都是集设置与获取值为一体的。
         * 1.html();与js的innerHTML属性的功能一致，获取标签之间的内容的。
         * 2.text();与js中的innerText属性的作用一致，获取开始标签到结束标签之间的文本内容。
         * 3.val(); 与js中的value属性作用一致。获取表单子标签提交给服务器的值的。
         *   1.对应用户填写的标签：text,password ，提交给服务器的值用户填写的内容
         *   2.对于用户选择的标签  checkbox,radio,提交给服务器的是选中的标签的value的属性值
         *   3.对于select下拉列表来说，提交给服务器的选中的option的value的属性值。
         */
        var $mydiv = $("#mydiv");
        //alert($mydiv.html());
        //$mydiv.html("<h1>标题</h1>");

        //alert($mydiv.text());
        $mydiv.text("<h1>标题</h1>");

        alert($("#myinput").val());
    </script>
</html>

2.属性操作：attr()和prop()

<script type="text/javascript">

   //获取北京节点的name属性值
   // var prop = $("#bj").attr("name","dabeijing");
   var $bj = $("#bj");
   //设置北京节点的name属性的值为dabeijing
   $bj.attr("name","dabeijing");
   //新增北京节点的discription属性属性值是didu
   $bj.attr("description","didu");
   //删除北京节点的name属性并检验name属性是否存在
   $bj.removeAttr("name");
   //获得hobby的的选中状态
   $("#btn").click(function () {
      var attr = $("#hobby").prop("checked")
      alert(attr);
       });
</script>

3.class属性操作和css样式操作

<script type="text/javascript">
       /**
        *  注意：jquery中很多方法，都是返回jquery对象本身。所以支持链式写法
        *  attr(class,value); 操作class属性
        *  addClass();直接操作class属性
        *  removeClass();删除class属性值
        *  toggleClass();切换class的属性值
        *
        */

    //<input type="button" value="采用属性增加样式(改变id=one的样式)"  id="b1"/>
    $("#b1").click(function () {
       $("#one").attr("class","second")
        });
    //<input type="button" value=" addClass"  id="b2"/>
    $("#b2").click(function () {
      $("#two").addClass("second");
        });
    //<input type="button" value="removeClass"  id="b3"/>
    $("#b3").click(function () {
      $("#one").removeClass("second");
        });
       // <input type="button" value=" 切换样式"  id="b4"/>
   $("#b4").click(function () {
      $("#one").toggleClass("second");
       });
       //<input type="button" value=" 获得样式"  id="b5"/>
   $("#b5").click(function () {
      var css = $("#one").css("background-color");
      alert(css);
       });
       // <input type="button" value=" 通过css()设置id为one背景颜色为绿色"  id="b6"/>
   $("#b6").click(function () {
      // $("#one").css("background-color","green").css("color","red");
      $("#one").css({
         "background-color":"green",
         "color":"red"
      });
       });
</script>

4.html元素创建与插入

  1. html元素创建：$(html代码)；
  2. html元素插入：（注：a和b都是jq对象）

【内部插入】父子关系

【外部插入】兄弟关系

【案例】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>内部插入脚本</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script language="JavaScript" src="../js/jquery-3.3.1.js"></script>
    <style type="text/css">
             div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div .mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
    </head>
     
    <body>
         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
         
         
          <ul id="love">
              <li id="fk" name="fankong">反恐</li>
             <li id="xj" name="xingji">星际</li>
         </ul>
        
        <div id="foo1">Hello1</div> 
       
    </body>
    
    <script type="text/javascript">

        /**
         *     a.append(b);   将b追加到a的里面的最后面
         *     a.prepend(b);  将b追加到a的里面的最前面
         *
         *     a.after(b);   将b添加到a的同级后面
         *
         *     $(完整的标签); 创建jquery标签对象  $("<li id='shanghai'>上海</li>")
         * /
        /**将反恐放置到city的后面*/
        var $city = $("#city");
        var $fk = $("#fk");

        //$city.append($fk);
       // $city.prepend($fk);
        var $bj = $("#bj");
        $bj.after($fk);
        /**将反恐放置到city的最前面*/

        //创建一个上海，添加到city的下面
        var $sh = $("<li id='shanghai'>上海</li>");
        $city.append($sh);
    </script>
   
</html>

5，html元素的删除操作 删除元素主要用到以下两个方法：remove() 和empty()方法，两者的区别：

  • remove()方法：移除当前元素及其所有子元素；
  • empty()方法：将当前元素的所有子元素清空，保留当前元素； 【案例】html元素的删除与清空练习

【需求】

  1. 使用remove()方法删除素材中的select标签，并观察删除后的效果；
  2. 使用empty()方法清空素材中的select标签，并观察效果；

【案例】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>删除节点</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <style type="text/css">
             div,span{
                width: 140px;
                height: 140px;
                margin: 20px;
                background: #9999CC;
                border: #000 1px solid;
                float:left;
                font-size: 17px;
                font-family:Roman;
            }
            
            div.mini{
                width: 30px;
                height: 30px;
                background: #CC66FF;
                border: #000 1px solid;
                font-size: 12px;
                font-family:Roman;
            }
            
            div.visible{
                display:none;
            }
     </style>
    
    </head>
     
    <body>
         <ul id="city">
              <li id="bj" name="beijing">北京</li>
             <li id="tj" name="tianjin">天津</li>
             <li id="cq" name="chongqing">重庆</li>
         </ul>
         <p class="hello">Hello</p> how are <p>you?</p> 
    </body>
    
    <script type="text/javascript">
    
       //删除<li id="bj" name="beijing">北京</li>
       $("#bj").remove(); //自杀
       //删除所有的子节点   清空元素中的所有后代节点(不包含属性节点).
       $("#city").empty();
       //测试(id='city')并没有被删除
       
    </script>
   
</html>
2、jQuery效果

 （1）元素的显示与隐藏 元素的显示与隐藏主要用到以下3个方法：

（2）元素的滑动显示与隐藏 元素的滑动显示与隐藏主要用到以下3个方法：

(3)元素的淡入淡出显示效果 元素的淡入淡出显示效果主要使用到以下3个方法：

 

五，选择器的使用案例，隔行换色和全选

1，隔行换色案例
1，技术分析

需要使用jquery的选择器(基本选择器、基本过滤选择器)

还需要使用jquery的CSS的方法(css(name,value))

如果CSS样式已经由美工写好，此时可以使用jquery的CSS类操作

2，步骤分析

第一步：引入jquery的类库

第二步：直接写页面加载函数

第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

3，案例代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <!--<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>-->
    <link rel="stylesheet" href="../css/style.css">
    <script>
        //1，页面加载
        $(function(){
            /*//2，获取tbody下面的偶数行并设置颜色
            $("tbody tr:even").css("background-color","yellow");
            //3，获取tbody下面的奇数行并设置颜色
            $("tbody tr:odd").css("background-color","green");*/

            //2，获取tbody下面的偶数行并设置颜色
            $("tbody tr:even").addClass("even");
            $("tbody tr:even").removeClass("even");
            //3，获取tbody下面的奇数行并设置颜色
            $("tbody tr:odd").addClass("odd");
        });
    </script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
    <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>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>
    <tr>
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>
    <tr>
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>
    <tr>
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
    </tbody>
</table>
</body>
</html>
2，全选和全不选案例

1，技术分析 需要使用jquery的选择器(id选择器、类选择器)

需要使用jquery的属性操作方法 prop()

2，步骤分析

第一步：引入jquery的类库

第二步：直接写页面加载函数

第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)

第四步：分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。

3，案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <!--<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>-->
    <link rel="stylesheet" href="../css/style.css">
    <script>
        //1，页面加载
        $(function(){
            /*//2，获取tbody下面的偶数行并设置颜色
            $("tbody tr:even").css("background-color","yellow");
            //3，获取tbody下面的奇数行并设置颜色
            $("tbody tr:odd").css("background-color","green");*/

            //2，获取tbody下面的偶数行并设置颜色
            $("tbody tr:even").addClass("even");
            $("tbody tr:even").removeClass("even");
            //3，获取tbody下面的奇数行并设置颜色
            $("tbody tr:odd").addClass("odd");
        });
    </script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" id="tbl">
    <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>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>
    <tr>
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>
    <tr>
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>
    <tr>
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
    </tbody>
</table>
</body>
</html>
2，全选和全不选案例

1，技术分析 需要使用jquery的选择器(id选择器、类选择器)

需要使用jquery的属性操作方法 prop()

2，步骤分析

第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！

3，代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.0.0.js"></script>
    <!--<script type="text/javascript" src="../js/jquery-1.8.3.js.js"></script>-->
    <script>
        $(function(){
           $("#select").click(function(){
               //attr方法与JQ版本有关，在1.8.3一下有效。
               // $("tbody input").attr("checked",this.checked);
               $("tbody input").prop("checked",this.checked);

           });
        });
    </script>
</head>
<body>
<table border="1" width="500" height="50" align="center" id="tbl" >
    <thead>
    <tr>
        <td colspan="4">
            <input type="button" value="添加" />
            <input type="button" value="删除" />
        </td>
    </tr>
    <tr>
        <th><input type="checkbox" id="select"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>1</td>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>2</td>
        <td>李四</td>
        <td>25</td>
    </tr>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>
    <tr >
        <td><input type="checkbox" class="selectOne"/></td>
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
    </tbody>
</table>
</body>
</html>

猜你喜欢

转载自www.cnblogs.com/cyxy31521/p/9556798.html
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022