jq序选择器

1.库和框架

库:小而精直接操作DOM

css()

jquerry封装js的那些操作: 事件,属性, ajax(交互的技术),DOM,选择器

框架:大而全事件,DOM,属性操作,ajax,"模板引擎"

2.jquerry 的入口函数:

//等待文加载后使用

$(function{});

$(window).ready(function(){});

3.DOM事件三步走

（1）事件源
主要还是学习选择器
css大部分选择器都可以使用

$('div'); 获取出来的是jquery对象

$('#box');

$('.active');

选择器的方法

（2）事件
js onclick onmouseover onmouseout onmouseenter onmouseleave onscroll onresize onchange onsubmit
jq的事件都不带on

//click()参数是一个回调函数，当调用click方法之后，做完了事件操作，jquery内部又返回一个jQuery对象，
所以我们又可以再次调用jquery的方法。
JQ对象.click(function(){})

(3)事件的回调函数是事件驱动

（4）对样式属性的操作
.css('color')
.css({
color:'red',
300
})
- 如果有一个参数，并且该参数的类型是字符串，获取
- 如果有一个参数，并且该参数的类型是{}，设置多个属性值
.css('color'，'red')
.css('width'，300)
- 如果有两个参数，设置单个的属性值

3.js jq 对象相互转换

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li class="item">alex</li>
10         <li>wusir</li>
11         <li>ritian</li>
12     </ul>
13     <script src="jquerry.js"></script>
14     <script>
15         var datas = ["red","green","yellow"];
16         //
17 
18         var item = document.getElementsByClassName("item")[0];
19         console.log(item);
20         1.将jquerry对象转化为js对象
21         console.log($('li')[0])
22         2.将js对象转化为jquerry对象
23         console.log($(item))
24         3.用css对jquerry对象进行属性操作 <1>只写一个css属性表示创建一个类class=item
25         <2>写两个字符串表示进行属性修改<3>多个进行打包修改
26         console.log($(item).css("color","blue").click(function () {
27             alert(11);
28         }))
29      4.链式编程 : 每一个都是一个对象 jquerry 99%都是方法
30         $(item).css("color","green").click(function() {
31             alert(11);
32         })
33 
34 
35 
36 
37 
38     </script>
39 
40 
41 </body>
42 </html>

转化

4.jquerry 高级选择器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="box">
 9         <p id="a">alex</p>
10         <p>日</p>
11         <p>天</p>
12     </div>
13     <p>wusir</p>
14     <script src="jquerry.js"></script>
15     <script>
16         $(function () {
17             //1.> 子子孙孙
18             // $(".box>p").css("color","green");
19             //2. 紧邻着的挨着的下一个兄弟元素
20             $("#a+p").css("color","green")
21         })
22 
23     </script>
24 
25 </body>
26 </html>

> +

5.基本过滤选择器需要使用``

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>alex</li>
10         <li>伊宁</li>
11         <li>未来</li>
12         <li>张菌康</li>
13     </ul>
14     <script src="jquerry.js"></script>
15     <script>
16         $(function () {
17             //定义一个变量
18             var i = 2;
19             //eq (index)为第index的索引
20             $(`ul li:eq(${i})`).css('color','red');
21             $(`ul li:eq(${1})`).css("color","red");
22             $('ul li:first').css('color','red');
23             $('ul li:last').css('color','red');
24 
25         })
26     </script>
27 
28 </body>
29 </html>

过滤选择要``

6.属性选择器

为了区分某种专有的属性类名=什么呀之类的用[]括起来表明

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         input[type='text']{
 8             border: none;
 9             outline: none;
10             border: 1px solid red;
11             width: 200px;
12             height: 100px;
13             font-size: 30px;
14 
15         }
16     </style>
17 </head>
18 <body>
19     <form action="">
20         
21         <input type="text" name='user' aaa='bbb' >
22         <input type="password" name="pwd">
23         <input type="submit">
24     </form>
25     <script src="jquery.js"></script>
26     <script>
27         
28 
29         $(function () {
30             
31             console.log($('input[type=text]'))
32         });
33     </script>
34 </body>
35 </html>

属性选择器

7.筛选选择器

筛选出想要的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div class="father">55
 9         <p>alex</p>
10         <a href="#">日天</a>
11         <span>村长</span>
12         <div class="g">55
13             <span>一宁</span>
14         </div>
15     </div>
16     <script src="jquerry.js"></script>
17     <script>
18         $(function () {
19             1.查找指定元素.father的所有后代元素g
20             console.log($(".father").find(".g"));
21             $(".father").find(".g").css("color","green")
22             $(".g").click(function () {
23                 //this这里已经封装了标记为专门的这个
24                 console.log(this);
25                 $(this).css("color","red");
26             })
27             2.find 亲儿子和孙子哦
28         $(".father").find("span").css("color","green")
29             find 重孙子哦
30             $('.father').find('.g>span').click(function () {
31                 console.log(this);
32             });
33             3.children亲儿子 找到的是子带的span 村长
34             $(".father").children("span").css("color","green")
35          4.parent ()查找父元素
36             $(".g span").parent().css("color","red")
37 
38 
39 
40 
41         })
42 
43     </script>
44 
45 
46 </body>
47 </html>

筛选 find children parent

8.siblings

找到除了自己的所有兄弟标签

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <ul>
 9         <li>尚宏运</li>
10         <li>刘宁谦</li>
11         <li>吕星星</li>
12         <li>赵挺</li>
13     </ul>
14     <script src="jquerry.js"></script>
15     <script>
16         $(function () {
17             $("ul li").click(function () {
18                 //这里的this是js里的 需要转换为jq对象
19                 //这里siblings是筛选除了li标签的所有兄弟,在这里除了自己的所有兄弟li
20                 $(this).css("color","red").siblings('li').css("color","blue");
21             })
22         })
23     </script>
24 </body>
25 </html>

删选器 siblings

9.选项卡

jquerry 版

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7                 *{
 8             padding: 0;
 9             margin: 0;
10         }
11         ul{
12             list-style:none;
13         }
14         a{
15             text-decoration: none;
16         }
17         .box{
18             width: 400px;
19             height: 300px;
20 
21         }
22         .box ul {
23             width: 100%;
24             overflow: hidden;
25         }
26         .box ul li{
27             float: left;
28             width: 50px;
29             height: 70px;
30             margin: 0 10px;
31             background-color: red;
32             text-align: center;
33             line-height: 70px;
34         }
35         a{
36             color: #fff;
37         }
38         .active{
39             width: 100%;
40             height: 100px;
41             background-color: green;
42             display: none;
43         }
44     </style>
45 </head>
46 <body>
47     <div class="box">
48             <ul>
49 
50             </ul>
51             <div class="active">
52 
53             </div>
54     </div>
55     <form action="">
56         <input type="text" value="123">
57     </form>
58     <script src="jquerry.js"></script>
59     <script>
60         $(function () {
61             $(".box ul").html( `<li>
62                 <a href="javascript:void(0);">张三</a>
63             </li>
64             <li>
65                 <a href="javascript:void(0);">李四</a>
66             </li>
67             <li>
68                 <a href="javascript:void(0);">王五</a>
69             </li>
70             <li>
71                 <a href="javascript:void(0);">赵六</a>
72             </li>`);
73             //1.单击 a 标签
74             $(".box ul li a").click(function () {
75                 //2.进行js 的清除空白
76                 $(this).css("color","red").parent("li").siblings("li").find("a").css('color',"#fff");
77                 //3.进行text操作 text后加()里面可以改变字
78                 var textVal = $(this).text();
79                 var newVal = `<h2>${textVal}</h2>`;
80                 //4.text的封装
81                 $(".active").show().text(textVal);
82                 // 4.innerHTML的封装
83                 $('.active').show().html(newVal);
84 
85             })
86         })
87     </script>
88 
89 
90 
91 </body>
92 </html>

选项卡

10.html 的标签属性操作

attr 增加属性

removeattr 移出属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .tt{
 8             color: red
 9         }
10         .active{
11             color: green;
12         }
13     </style>
14 </head>
15 <body>
16     <div class="box">
17         
18     </div>
19         
20     <script src="jquery.js"></script>
21     <script>
22         $(function () {
23             //初始化操作
24 
25             // $('.box').html('<a href="http://www.baidu.com">百度一下</a>');
26 
27             <!--1.attr 进行html属性的添加 attr() 括号里面添加属性,多个属性用中括号表示-->
28             $("div").attr("class","bos");
29             console.log(    $("div").attr({name:"haha",color:"red"}));
30             //2.removeAttr 进行html属性的移出功能
31             $("div").attr({name:"haha",color:"red"});
32             $('div').removeAttr("color");
33 
34 
35 
36 
37 
38 
39             $('.box').html('<a id="anchor"></a>');
40             $('#anchor').attr('href','http://www.baidu.com').text('百度一下');
41 
42             console.log($('#anchor').attr('id'));
43             $('#anchor').attr({
44                 title:'123',
45                 class:'tt'
46             });
47             $('body').click(function () {
48                 // $('#anchor').attr('class','active');
49                 $('#anchor').addClass('active');
50 
51                 // 移除多个类名
52                 $('#anchor').removeClass('active tt');
53 
54                 $('#anchor').removeAttr('title href');
55 
56 
57                 
58 
59             });
60 
61 
62         })
63     </script>
64 </body>
65 </html>

html属性

11.控制元素显示隐藏

通过addClass removeClass 来增加标签属性

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color: red;
11         }
12         div.hidden{
13             display: none;
14         }
15     </style>
16 </head>
17 <body>
18     <button>隐藏</button>
19     <div class="box"></div>
20     <script src="jquery.js"></script>
21     <script>
22         $(function () {
23             /*
24             var isShow = true;
25             $('button').click(function(event) {
26                 if (isShow) {
27                     $('.box').addClass('hidden');
28                     isShow =false;
29                 }else{
30                     $('.box').removeClass('hidden');
31                     isShow = true;
32                 }
33                 
34             });
35             */
36             $('button').click(function(event) {
37 
38                 $('.box').toggleClass('hidden');
39 
40             })
41         })
42     </script>
43 </body>
44 </html>

View Code

11.动画实现

toggle

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color:red;
11         }
12     </style>
13 </head>
14 <body>
15     
16     <button id="btn">动画</button>
17     <div class="box"></div>
18     <script src="jquery.js">
19         
20     </script>
21     <script>
22         
23         $(function () {
24             $('#btn').click(function(event) {
25                 // $('.box').hide();
26 
27                 //toggle()
28                 $('.box').stop().toggle(1000);
29             });
30         })
31     </script>
32 </body>
33 </html>

toggle

12.选项卡的嵌套

通过jq 对象的eq 属性来操作

  1 <!DOCTYPE html>
  2 <!DOCTYPE html>
  3 <html lang="en">
  4 <head>
  5     <meta charset="UTF-8">
  6     <title></title>
  7     <style>
  8         *{
  9             padding: 0;
 10             margin: 0;
 11         }
 12         ul{
 13             list-style:none;
 14         }
 15         a{
 16             text-decoration: none;
 17         }
 18         .box{
 19             width: 400px;
 20             height: 300px;
 21 
 22         }
 23         .box ul {
 24             width: 100%;
 25             overflow: hidden;
 26         }
 27         .box ul li{
 28             float: left;
 29             width: 50px;
 30             height: 70px;
 31             margin: 0 10px;
 32             background-color: red;
 33             text-align: center;
 34             line-height: 70px;
 35         }
 36         a{
 37             color: #fff;
 38         }
 39         .active{
 40             width: 100%;
 41             height: 100px;
 42             background-color: green;
 43             display: none;
 44         }
 45         .show{
 46             display: block; 
 47         }
 48     </style>
 49 </head>
 50 <body>
 51     <button class="next">下一张</button>
 52     <div class="box">
 53         <ul>
 54             <li>
 55                 <a href="javascript:void(0);">张三</a>
 56             </li>
 57             <li>
 58                 <a href="javascript:void(0);">李四</a>
 59             </li>
 60             <li>
 61                 <a href="javascript:void(0);">王五</a>
 62             </li>
 63             <li>
 64                 <a href="javascript:void(0);">赵六</a>
 65             </li>
 66         </ul>
 67         <div class="active">
 68             
 69         </div>
 70         <div class="active">
 71             
 72         </div>
 73         <div class="active">
 74             
 75         </div>
 76         <div class="active">
 77             
 78         </div>
 79 
 80     </div>
 81     
 82     <script src="jquery.js"></script>
 83     <script>
 84         
 85         $(function () {
 86 
 87             
 88             var count = 0;
 89             //当点击下一个的时候,控制的eq索引变化
 90             
 91             $('.next').click(function(event) {
 92                 count++;
 93                 //1.ul 下的 li 标签变色
 94                 $('ul li').eq(count).css('backgroundColor','green').siblings('li').css('backgroundColor','red');
 95                 //2.div 的active类 变色
 96                 $('div.active').eq(count).addClass('show').html('abc').siblings('div.active').removeClass('show').html('');
 97 
 98                 
 99             });
100 
101 
102             //点击a标签的时候执行的操作
103             $('.box ul li a').click(function(event) {
104                 $(this).css('color','green').parent('li').siblings('li').find('a').css('color','#fff');
105 
106                 
107 
108                 var textVal = $(this).text();
109                 var newVal = `<h1>${textVal}</h1>`
110                 // $('.active').show().text(textVal);
111 
112                 // index() 将返回列表中第一个元素相对于其同辈元素的位置
113                 console.log($(this).parent().index());
114                 var index = $(this).parent().index();
115 
116                 $('div.active').eq(index).addClass('show').html(newVal).siblings('div.active').removeClass('show').html('');
117                 
118 
119             });
120         })
121     </script>
122     
123     
124 
125 </body>
126 </html>

选项卡嵌套

jq序 选择器

jq序选择器