jQuery引入

昨日内容回顾

BOM

 1  window对象
 2  location.href;获取当前窗口的url
 3  location.href = 'http://www.xiaohuar.com';  #跳转到指定网址
 4  location.reload() 刷新页面
 5  ​
 6  计时器
 7  var a = setTimeOut(function(){...},毫秒);  一段时间后做某些事情
 8  clearTimeOut(a)
 9  var a = setInterval(function(){},毫秒);
10  clearInterval(a);
11  ​

 

 

DOM

选择器

 1  直接查找:
 2      document.getElementById('d1')
 3      document.getElementsByClassName('c1')
 4      document.getElementsByTagName('标签名')
 5  间接查找
 6      var a = document.getElementById('d1');
 7      a.parentElement
 8      a.children
 9      firstElementChild
10      lastElementChild
11      nextElementSibling
12      previousElementSibling
13

 

节点操作

1  创建节点
2      var a = document.createElement('标签名');
3  添加节点
4      父级节点.appendChild(a);
5      父级节点.insertBefore(a,某个儿子节点)
6  删除节点
7      父级节点.removeChild(某个节点)
8  替换
9      父级节点.replaceChild(新节点,被替换的那个节点)

文本操作

1  innerText  
2  innerHtml  识别标签
3  ​
4  innerText='xx'.
5  innerHtml='xx'

属性操作

1  设置属性 setAttribute(属性,值)
2  查看属性 getAttribute(属性)
3  删除属性 removeAttribute(属性)
4  ​
5  标签子带属性
6  标签对象.属性;
7  标签对象.属性 = 'xxx'

 

值操作

1  input select textarea
2  标签.value;
3  标签.value = 'xx';
4  ​
5  select标签.value
6  select标签.value = option标签的value属性的值   这个标签就被选中了

class操作

1  获取class的值
2  标签对象.classList;
3  标签对象.classList.add('值')
4  标签对象.classList.remove('值')
5  标签对象.classList.contains('值')
6  标签对象.classList.toggle('值')

css操作

1  标签对象.style.css属性 = '值'
2  background-color  --- backgroundColor

事件

 1 方式1:
 2     <div id='d1' onclick="f1();"></div>
 3     <script>
 4         function f1(){
 5             var d = getElementById('d1');
 6         }
 7 
 8     </script>
 9 方式2:
10     <div id='d1'></div>
11     <script>
12         var d = getElementById('d1');
13         d.onclick = function(){}
14     </script>
15 
16 onclick
17 onfocus
18 onblur
19 onchange

 

今日内容

jQuery



 


jQuery引入




1 下载链接：[jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。
2  




 


jquery对象和dom对象




1 jquery找到的标签对象称为 -- jquery对象
2 原生js找到的标签对象称为 -- dom对象
3 dom对象只能使用dom对象的方法,不能使用jquery对象的方法
4 jquery对象也是,它不能使用dom对象的方法
5 
6 dom对象和jquery对象互相转换:
7     jquery对象转dom对象 -- jquery对象[0]  示例:$('#d1')[0]
8     dom对象转jquery对象 -- $(dom对象)
9  




 


jQuery选择器


基本选择器




 1 jQuery('#d1')  -- $('#d1')
 2 基本选择器（同css）
 3 　　　　　　id选择器：
 4 
 5     $("#id")  #不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象，看我们上面的jQuery对象部分的内容
 6 　　　　　　标签选择器：
 7 
 8     $("tagName")  $('div')
 9 　　　　　　class选择器：
10 
11     $(".className")  
12 　　　　　　配合使用：
13 
14     $("div.c1")  // 找到有c1 class类的div标签
15 　　　　　　所有元素选择器：
16 
17     $("*")
18 　　　　　　组合选择器：
19 
20     $("#id, .className, tagName")
21 
22     选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象




 


基本筛选器




 1 <ul>
 2     <li>蔡世楠</li>
 3     <li>尤利阳</li>
 4     <li id="l3">张雷</li>
 5     <li>申凯琦</li>
 6     <li id="l5">程德浩</li>
 7     <li>罗新宇</li>
 8     <li>曾凡星</li>
 9 </ul>
10 
11 :first  -- 示例:$('li:first') // 第一个
12 :last // 最后一个
13 :eq(index)// 索引等于index的那个元素
14 :even // 匹配所有索引值为偶数的元素，从 0 开始计数
15 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数
16 :gt(index)// 匹配所有大于给定索引值的元素
17 :lt(index)// 匹配所有小于给定索引值的元素
18 :not(元素选择器)// 移除所有满足not条件的标签
19 :has(元素选择器)// --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
20 :not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签
21  




 


属性选择器




 1 [attribute]
 2 [attribute=value]// 属性等于
 3 [attribute!=value]// 属性不等于
 4 
 5 // 示例,多用于input标签
 6 <input type="text">
 7 <input type="password">
 8 <input type="checkbox">
 9 $("input[type='checkbox']");// 取到checkbox类型的input标签
10 $("input[type!='text']");// 取到类型不是text的input标签
11  




 


表单筛选器




1 找到的是type属性为这个值的input标签中
2 :text
3 :password
4 :file
5 :radio
6 :checkbox
7 :submit
8 :reset
9 :button




 


表单对象属性筛选器




1 :enabled   #可用的标签
2 :disabled  #不可用的标签
3 :checked   #选中的input标签
4 :selected  #选中的option标签




 


筛选器方法




 1 下一个:
 2     $('#l3').next();  找到下一个兄弟标签
 3     $('#l3').nextAll(); 找到下面所有的兄弟标签
 4     $('#l3').nextUntil('#l5');#直到找到id为l5的标签就结束查找，不包含它
 5 上一个
 6     $("#id").prev()
 7     $("#id").prevAll()
 8     $("#id").prevUntil("#i2")
 9 父亲元素
10     $("#id").parent()
11     $("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
12     $("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
13 
14 儿子和兄弟元素
15 $('ul').children(); 
16 $('ul').children('#l3');  #找到符合后面这个选择器的儿子标签
17 
18 $('#l5').siblings();
19 $('#l5').siblings('#l3'); #找到符合后面这个选择器的兄弟标签
20 
21 
22 find
23     $('ul').find('#l3')  -- 类似于  $('ul #l3')
24 filter过滤
25     $('li').filter('#l3');
26 
27 
28 .first() // 获取匹配的第一个元素
29 .last() // 获取匹配的最后一个元素
30 .not()  // 从匹配元素的集合中删除与指定表达式匹配的元素  $('li').not('#l3');
31 .has()  // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
32 .eq()  // 索引值等于指定值的元素
33  




 


作业讲解


作业1代码:




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>定时器</title>
 8 
 9 </head>
10 <body>
11 
12 <input type="text" id="timer">
13 <button id="start">开始</button>
14 <button id="end">结束</button>
15 
16 
17 <script>
18     var timetag;
19     // 1 获取当前时间
20     function f1() {
21         var showTime = new Date();
22         var showLocaleTime = showTime.toLocaleString();
23         var inpEle = document.getElementById('timer');
24         inpEle.value = showLocaleTime;
25     }
26     // 2 把时间放进去
27     //     2.1 找到strat开始按钮,绑定点击事件
28     var startBtn = document.getElementById('start');
29     startBtn.onclick = function () {
30         //2.2 找到input标签,并将值放到input标签里面
31         f1();
32         if (timetag === undefined){
33             timetag = setInterval(f1,1000);
34         }
35     };
36     // 3 停止时间
37     var endBtn = document.getElementById('end');
38     endBtn.onclick = function () {
39         clearInterval(timetag);
40         timetag = undefined;
41     }
42 
43 
44 </script>
45 
46 </body>
47 </html>




 


作业2代码:




 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>select联动</title>
 8 </head>
 9 <body>
10 
11 <select id="province">
12   <option>请选择省:</option>
13 
14 </select>
15 
16 <select id="city">
17   <option>请选择市:</option>
18 </select>
19 
20 <script>
21     var data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
22 
23     // 1 将省份的数据放到省份的下拉框里面
24     //1.1 找到省份下拉框
25     var proSelect = document.getElementById('province');
26     // 1.2 创建option标签
27 
28     //1.3  将数据放到option标签中,并将option标签放到省份下拉框里面
29     for (var province in data){
30         var proOption = document.createElement('option');
31         proOption.innerText = province;
32         proSelect.appendChild(proOption);
33     }
34 
35     //2 选择省份,将被选择的省份的市都放到市的那个下拉框里面
36     var citySelect = document.getElementById('city');
37     proSelect.onchange = function () {
38         citySelect.innerText = '';
39         var proText = this.options[this.selectedIndex].innerText;
40         var cityData = data[proText];
41         for (var cityindex in cityData){
42             var cityOption = document.createElement('option');
43             cityOption.innerText = cityData[cityindex];
44             citySelect.appendChild(cityOption);
45 
46         }
47     }
48 
49 
50 </script>
51 
52 </body>
53 </html>
54  




 


 


 


 


 


 


 


 


 


 


 


 


 


 


 






		

		
posted @ 
2019-06-05 18:09 
.如影随行 
阅读(1541) 
评论(0) 
编辑 
收藏 
举报