jQuery基本操作

一，jQuery 的选择器

1、jQuery 的基本选择器(同css选择器)

2、层级选择器

注意：div+p 选择器是选中的div 的下一个兄弟元素p，不是子代。

3、基本过滤选择器

解释：

4、属性选择器

5.筛选选择器

二，jQuery 的动画效果

1 显示和隐藏动画

1.1，显示动画

方式一：

  $("div").show();

解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。

方式二：

$(\'div\').show(3000);

解释：通过控制元素的宽高、透明度、display属性，逐渐显示，2秒后显示完毕。

方式三：

 $("div").show("slow");

参数可以是：

slow 慢：600ms
normal 正常：400ms
fast 快：200ms

解释：和方式二类似，也是通过控制元素的宽高、透明度、display属性，逐渐显示。

方式四：

 //show(毫秒值，回调函数;
    $("div").show(5000,function () {
        alert("动画执行完毕！");
    });

解释：动画执行完后，立即执行回调函数。

总结：

上面的四种方式几乎一致：参数可以有两个，第一个是动画的执行时长，第二个是动画结束后执行的回调函数。

1.2，隐藏动画

方式参照上面的show()方法的方式。如下：

    $(selector).hide();

    $(selector).hide(1000); 

    $(selector).hide("slow");

    $(selector).hide(1000, function(){});

实例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #box{
 8                 width: 200px;
 9                 height: 200px;
10                 background-color: green;
11                 border: 1px solid red;
12                 display: none;
13             }
14         </style>
15     </head>
16     <body>
17         <div id="box">        
18         </div>
19         <button id="btn">隐藏</button>    
20     </body>
21     <script src="jquery-3.3.1.js"></script>
22     
23     <script type="text/javascript">
24         
25         //jquery 提供了一些方法 show() hide() 控制元素显示隐藏
26         var isShow = true;
27         $(\'#btn\').click(function(){
28             if(isShow){
29                 $(\'#box\').show(\'slow\',function(){
30                     $(this).text(\'盒子出来了\');            
31                     $(\'#btn\').text(\'显示\');
32                     isShow = false;
33                 })
34             }else{
35                 $(\'#box\').hide(2000,function(){
36                     $(this).text(\'\');    
37                     $(\'#btn\').text(\'隐藏\');
38                     isShow = true;
39                     
40                 })
41             }
42         })
43     
44         
45     </script>
46 </html>

实现点击按钮显示盒子，再点击按钮隐藏盒子

1.3，开关式显示隐藏动画

$(\'#box\').toggle(3000,function(){});

显示和隐藏的来回切换采用的是toggle()方法：就是先执行show()，再执行hide()。

 $(\'#btn\').click(function(){
            $(\'#box\').toggle(3000,function(){
                $(this).text(\'盒子出来了\');    
                if ($(\'#btn\').text()==\'隐藏\') {
                    $(\'#btn\').text(\'显示\');    
                }else{
                    $(\'#btn\').text(\'隐藏\');    
                }
            });
        })

2，滑入和滑出

2.1、滑入动画效果：（类似于生活中的卷帘门）

$(selector).slideDown(speed, 回调函数);

解释：下拉动画，显示元素。

注意：省略参数或者传入不合法的字符串，那么则使用默认值：400毫秒（同样适用于fadeIn/slideDown/slideUp）

2.2、滑出动画效果：

 $(selector).slideUp(speed, 回调函数);

解释：上拉动画，隐藏元素。

2.3、滑入滑出切换动画效果：

 $(selector).slideToggle(speed, 回调函数);

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 300px;
10             display: none;
11             background-color: green;
12         }
13     </style>
14 
15     <script src="jquery-3.3.1.js"></script>
16     <script>
17         $(function () {
18             //点击按钮后产生动画
19             $("button:eq(0)").click(function () {
20 
21                 //滑入动画： slideDown(毫秒值，回调函数[显示完毕执行什么]);
22                 $("div").slideDown(2000, function () {
23                     alert("动画执行完毕！");
24                 });
25             })
26 
27             //滑出动画
28             $("button:eq(1)").click(function () {
29 
30                 //滑出动画：slideUp(毫秒值，回调函数[显示完毕后执行什么]);
31                 $("div").slideUp(2000, function () {
32                     alert("动画执行完毕！");
33                 });
34             })
35 
36             $("button:eq(2)").click(function () {
37                 //滑入滑出切换（同样有四种用法）
38                 $("div").slideToggle(1000);
39             })
40 
41         })
42     </script>
43 </head>
44 <body>
45 <button>滑入</button>
46 <button>滑出</button>
47 <button>切换</button>
48 <div></div>
49 
50 </body>
51 </html>

滑入和划出及切换效果

3，淡入淡出动画

3.1、淡入动画效果：

 $(selector).fadeIn(speed, callback);

作用：让元素以淡淡的进入视线的方式展示出来。

3.2、淡出动画效果：

$(selector).fadeOut(1000);

作用：让元素以渐渐消失的方式隐藏起来

3.3、淡入淡出切换动画效果：

 $(selector).fadeToggle(\'fast\', callback);

作用：通过改变透明度，切换匹配元素的显示或隐藏状态。

参数的含义同show()方法。

实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         div {
 8             width: 300px;
 9             height: 300px;
10             display: none;
11             /*透明度*/
12             opacity: 0.5;
13             background-color: red;
14         }
15     </style>
16 
17     <script src="jquery-3.3.1.js"></script>
18     <script>
19         $(function () {
20             //点击按钮后产生动画
21             $("button:eq(0)").click(function () {
22 
23 //                //淡入动画用法1:   fadeIn();   不加参数
24                 $("div").fadeIn();
25 
26 //                //淡入动画用法2:   fadeIn(2000);   毫秒值
27 //                $("div").fadeIn(2000);
28 //                //通过控制  透明度和display
29 
30                 //淡入动画用法3:   fadeIn(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
31 //                $("div").fadeIn("slow");
32 //                $("div").fadeIn("fast");
33 //                $("div").fadeIn("normal");
34 
35                 //淡入动画用法4:   fadeIn(毫秒值，回调函数[显示完毕执行什么]);
36 //                $("div").fadeIn(5000,function () {
37 //                    alert("动画执行完毕！");
38 //                });
39             })
40 
41             //滑出动画
42             $("button:eq(1)").click(function () {
43 //                //滑出动画用法1:   fadeOut();   不加参数
44                $("div").fadeOut();
45 
46 //                //滑出动画用法2:   fadeOut(2000);   毫秒值
47 //                $("div").fadeOut(2000);  //通过这个方法实现的：display: none;
48 //                //通过控制  透明度和display
49 
50                 //滑出动画用法3:   fadeOut(字符串);   slow慢：600ms   normal正常:400ms   fast快：200ms
51 //                $("div").fadeOut("slow");
52 //                $("div").fadeOut("fast");
53 //                $("div").fadeOut("normal");
54 
55                 //滑出动画用法1:   fadeOut(毫秒值，回调函数[显示完毕执行什么]);
56 //                $("div").fadeOut(2000,function () {
57 //                    alert("动画执行完毕！");
58 //                });
59             })
60 
61             $("button:eq(2)").click(function () {
62                 //滑入滑出切换
63                 //同样有四种用法
64                 $("div").fadeToggle(1000);
65             })
66 
67             $("button:eq(3)").click(function () {
68                 //改透明度
69                 //同样有四种用法
70                 $("div").fadeTo(1000, 0.5, function () {
71                     alert(1);
72                 });
73             })
74         })
75     </script>
76 </head>
77 <body>
78 <button>淡入</button>
79 <button>淡出</button>
80 <button>切换</button>
81 <button>改透明度为0.5</button>
82 <div></div>
83 
84 </body>
85 </html>

View Code

4，自定义动画

语法：

 $(selector).animate({params}, speed, callback);

作用：执行一组CSS属性的自定义动画。

第一个参数表示：要执行动画的CSS属性（必选）
第二个参数表示：执行动画时长（可选）
第三个参数表示：动画执行完后，立即执行的回调函数（可选）

实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .con{
 8             height: 100%;
 9             width: 100%;
10             background-color: rgba(0,0,0,0.6);
11             position: relative;
12         }
13         .shop{
14             height: 50px;
15             width: 100px;
16             background-color: #fa6240;
17             position: absolute;
18             top: 500px;
19             left: 50px;
20             color: #04b141;
21             text-align: center;
22             line-height: 50px;
23         }
24         .car{
25             height: 100px;
26             width: 100px;
27             background-color: blue;
28             position: absolute;
29             top: 50px;
30             right: 50px;
31             color: red;
32             text-align: center;
33             line-height: 100px;
34         }
35     </style>
36 </head>
37 <body>
38     <button>加入购物车</button>
39     <div class="con">
40         <div class="car">购物车</div>
41         <div class="shop">商品</div>
42     </div>
43 
44     <script src="jquery-3.3.1.js"></script>
45     <script>
46         $(function () {
47             $("button").click(function () {
48                 var json = {"left": 300, "top": 450, "border-radius": 50};
49                 var json2 = {"left": 50, "top": 350, "border-radius": 100, "background-color": "red"};
50                 var json3 = {"left": 600, "top": 200, "border-radius": 100, "background-color": "red"};
51                 var json4 = {"left": 50, "top": 150, "border-radius": 100, "background-color": "red"};
52                 var json5 = {"left": 1370, "top": 70, "border-radius": 100, "background-color": "red"};
53                 $(".shop").animate(json,800,function () {
54                     $(".shop").animate(json2,1000,function () {
55                        $(".shop").animate(json3,1000,function (){
56                            $(".shop").animate(json4,1000,function (){
57                                $(".shop").animate(json5,2000,function (){
58                                    $(".shop").hide(500,function () {
59                                         alert("加入成功")
60                                    })
61                                })
62                            })
63                        })
64                     })
65                 })
66             })
67         })
68     </script>
69 </body>
70 </html>

加入购物车动画--有点丑

5，停止动画

注意：一般在使用动画时，都需要先给目标设置停止动画，再继续设置动画，防止动画效果太慢，导致用与用户不一致。

$(selector).stop(true, false);

里面的两个参数，有不同的含义。

第一个参数：

true：后续动画不执行。
false：后续动画会执行。

第二个参数：

true：立即执行完成当前动画。
false：立即停止当前动画。

PS：参数如果都不写，默认两个都是false。实际工作中，直接写stop()用的多。

三，jQuery 的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1，attr()

设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值
var id = $(\'div\').attr(\'id\')
console.log(id)
 var cla = $(\'div\').attr(\'class\')
console.log(cla)
 //设置值
//1.设置一个值 设置div的class为box
$(\'div\').attr(\'class\',\'box\')
 //2.设置多个值，参数为对象，键值对存储
$(\'div\').attr({name:\'hahaha\',class:\'happy\'})  //注意：特别的这里的键值对，key不加引号

2，removeAttr()

移除属性

//删除单个属性
$(\'#box\').removeAttr(\'name\');
$(\'#box\').removeAttr(\'class\');

//删除多个属性
$(\'#box\').removeAttr(\'name class\');

3，prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})  //注意这里的写法后面的key要加引号，区别attr：$(".box").prop({"class":"box2", "name":"haha"});

4，关于attr()和prop()的区别

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id=\'test\' name="sex"  checked/>
    女<input type="radio" id=\'test2\' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $(\'input\').first();
            //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
            console.log(el.attr(\'style\'));
            // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
            console.log(el.prop(\'style\'));
            console.log(document.getElementById(\'test\').style);

            $(\'button\').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

区别

<input type="radio" value="男" name= "gay" id="bt1" checked="">


console.log($("#bt1").prop("checked"));  //返回bool值
console.log($("#bt1").attr("checked"));  //返回一个checked

1.是有true,false两个属性使用prop();

2.其他则使用attr();

5, addClass（添加多个类名）

$(\'div\').addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

$(\'div\').addClass("box box2");//追加多个类名

6, removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类（一个或多个）

$(\'div\').removeClass(\'box\')；

移除全部的类

$(\'div\').removeClass();

var tag  = false;
        $(\'span\').click(function(){
            if(tag){
                $(\'span\').removeClass(\'active\')
                tag=false;
            }else{
                $(\'span\').addClass(\'active\')
                tag=true;
            }    
})

可以通过添加删除类名，来实现元素的显示隐藏

7, toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass(\'box\')

$(\'span\').click(function(){
    //动态的切换class类名为active
    $(this).toggleClass(\'active\')
})

8, html

获取值：

语法;

html() 是获取选中标签元素中所有的内容

$(\'#box\').html();

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$(\'#box\').html(\'<a href="https://www.baidu.com">百度一下</a>\');

9, text

获取值：

text() 获取匹配元素包含的文本内容

语法：

$(\'#box\').text();

设置值：
设置该所有的文本内容

$(\'#box\').text(\'<a href="https://www.baidu.com">百度一下</a>\');

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

10, val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$(\'input\').val(\'设置了表单控件中的值\')；

四，jQuery 的文档操作

1，插入操作

1.1 append（）(添加子代元素)

语法：

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js对象） | jquery元素

代码如下：

var oli = document.createElement(\'li\');
oli.innerHTML = \'哈哈哈\';
$(\'ul\').append(\'<li>1233</li>\');
$(\'ul\').append(oli);
$(\'ul\').append($(\'#app\'));

注意:如果追加的是jquery对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

1.2 appendTo() (添加子代元素)

语法：

子元素.appendTo(父元素)

解释：追加到某元素子元素添加到父元素

$(\'<li>天王盖地虎</li>\').appendTo($(\'ul\')).addClass(\'active\')

注意:要添加的元素同样既可以是stirng 、element(js对象) 、 jquery元素

1.3 prepend() (添加子代元素)

语法：

父元素.prepend(子元素)；

解释：前置添加，在父元素的第一个位置插入一个元素

$(\'ul\').prepend(\'<li>我是第一个</li>\')

1.4 prependTo() (添加子代元素)

语法：

父元素.prependTo(子元素)；

解释：前置添加，添加到父元素的第一个位置

 $(\'<a href="#">路飞学诚</a>\').prependTo(\'ul\')

1.5 after（）和inserAfter（）(添加兄弟元素)

语法：

父元素.after(子元素)；
子元素.inserAfter(父元素)；

解释：在匹配的元素之后插入内容

$(\'ul\').after(\'<h4>我是一个h3标题</h4>\')
$(\'<h5>我是一个h2标题</h5>\').insertAfter(\'ul\')

1.6 before（）和 inserBefore() (添加兄弟元素)

语法：

父元素.before(子元素)；
子元素.inserBefore(父元素)；

解释：在匹配的元素之前插入内容

$(\'ul\').before(\'<h3>我是一个h3标题</h3>\')
$(\'<h2>我是一个h2标题</h2>\').insertBefore(\'ul\')

2，克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的DOM元素

$(\'button\').click(function() {

  // 1.clone()：克隆匹配的DOM元素
 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
  $(this).clone(true).insertAfter(this);
})

克隆

3，修改操作

3.1 raplaceWith()

语法：

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的string、js对象、jquery对象。

//将所有的h5标题替换为a标签
$(\'h5\').replaceWith(\'<a href="#">hello world</a>\')
//将所有h5标题标签替换成id为app的dom元素
$(\'h5\').replaceWith($(\'#app\'));

3.2 replaceAll()

语法：

$(\'<p>哈哈哈</p>\')replaceAll(\'h2\');

解释：替换所有。将所有的h2标签替换成p标签。

特别的：

<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>


$(\'.first\').replaceAll(\'.third\');

结果：
div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

从这个示例可以看出，用来替换的元素从老地方移到新位置，而不是复制。

4、删除操作

4.1 remove()

语法：

 var $btn = $(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$(\'ul\').remove();

返回值就是删除的那个元素；

4.2 detach()

语法：

$(selector).detach();

解释：删除节点后，事件会保留

 var $btn = $(\'button\').detach()
 //此时按钮能追加到ul中
 $(\'ul\').append($btn)

返回值就是删除的那个元素；

4.3 empty()

清空子元素；

语法：

$(selector).empty();

解释：清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$(\'ul\').empty()

1、width() 和 height()

1.1 获取宽度

.width()

//获取第一个盒子
        console.log($(".box").width()); //结果为数字
        console.log($(".box").css("width"));//字符串结果

1.2 设置宽度

.width( value )

描述：给每个匹配的元素设置CSS宽度。

$(".box").width(300);  // 参数为数字
$(".box").width("300"); //参数为字符串
//两种写法都可以

1.3 获取高度

.height()

描述：获取匹配元素集合中的第一个元素的当前计算高度值。

这个方法不接受任何参数。

1.4 设置高度

 .height( value )

描述：设置每一个匹配元素的高度值。

2、innerHeight()和innerWidth()

2.1 获取内部宽

.innerWidth()

描述：为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。

ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.width()代替。

2.2 设置内部宽

.innerWidth(value);

描述：为匹配集合中的每个元素设置CSS内部宽度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

2.3 获取内部高

.innerHeight()

描述：为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。

ps:这个方法不适用于window 和 document对象，对于这些对象可以使用.height()代替。

2.4 设置内部宽

.innerHeight(value);

描述：为匹配集合中的每个元素设置CSS内部高度。如果这个“value”参数提供一个数字，jQuery会自动加上像素单位（px）

3.outWidth和outHeight()

3.1 获取外部宽

 .outerWidth( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部宽度（包括padding，border和可选的margin）

includeMargin (默认: false)

类型： Boolean

一个布尔值，表明是否在计算时包含元素的margin值。
这个方法不适用于window 和 document对象，可以使用.width()代替

3.2 设置外部宽

 .outerWidth( value )

描述：为匹配集合中的每个元素设置CSS外部宽度。

3.3 获取外部高

 .outerHeight( [includeMargin ] )

描述：获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）

includeMargin (默认: false)

类型： Boolean

一个布尔值，表明是否在计算时包含元素的margin值。
这个方法不适用于window 和 document对象，可以使用.width()代替

3.4 设置外部高

 .outerHeight( value )

描述：为匹配集合中的每个元素设置CSS外部高度。

一，jQuery 的选择器

1、jQuery 的基本选择器(同css选择器)

2、层级选择器

3、基本过滤选择器

4、属性选择器

5.筛选选择器

二，jQuery 的动画效果

1 显示和隐藏动画

2，滑入和滑出

3，淡入淡出动画

4，自定义动画

5，停止动画

三，jQuery 的属性操作

1，attr()

2，removeAttr()

3，prop()

4，关于attr()和prop()的区别

5, addClass（添加多个类名）

6, removeClass

7, toggleClass

8, html

9, text

10, val

四，jQuery 的文档操作

1， 插入操作

2， 克隆操作

3，修改操作

3.2 replaceAll()

4、删除操作

1、width() 和 height()

2、innerHeight()和innerWidth()

3.outWidth和outHeight()

1，插入操作

2，克隆操作