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