上节内容回顾:
1. 前情回顾 1. DOM对象和BOM对象 1. BOM 对象 --> window location location.href location.href="https://www.sogo.com" location.reload history navigator 2. DOM 1. document结构 1. 节点 1. 文档节点 2. 元素节点 3. 属性节点 4. 文本节点 2. 查找标签 1. 基本查找 1. ID查找 --> docuemnt.getElementById 2. 标签名查找 --> document.getElementsByTagName 3. class名查找 --> document.getElementsByClassName // 4. 属性查找 --> document.getElementsByName 2. 层级查找 1. 上一级父标签 --> eleObj.parentElement 2. 儿子标签 --> eleObj.children 3. 第一个儿子 --> eleObj.firstElementChild 4. 最后一个儿子 --> eleObj.lastElementChild 5. 上一个兄弟标签 --> eleObj.previousElementSibling 5. 下一个兄弟标签 --> eleObj.nextElementSibling 3. 创建标签 1. doucument.creatElement("div") --> 要创建什么标签括号里面就写什么 2. 设置标签内容 1. eleObj.innerHTML = "<p>P标签</p>" 2. eleObj.innerText = "标签中间的文本" 3. 标签属性 1. input标签相关 1. inputEle.value --> 获取input框的输入值 2. inputEle.value = "请输入xxx" --> 设置input框的值 2. checkbox标签相关 1. checkboxEle.checked --> 返回true或false 2. checkboxEle.checked = true --> 选中该checkbox 3. select标签相关 1. selectObj.options --> 获取所有的option选项 （数组） 2. selecObj.selectedIndex --> 获取选中的option的索引值 3. selecObj.options.length=0 --> 快速清空option 2. JS 事件 常用事件 onclick ondbclick onload blur fouces onchange (select联动示例) 绑定事件方法 1. 在标签上通过特定的事件属性绑定事件 比如： <div onclick="f()">点我点我点我</div> 2. 通过JS绑定事件 eleObj.onclick = function(){ ... } 3. 事件委托（利用事件冒泡） 找到父标签，给子标签绑定事件 <ul>li*100</ul> ulEle.onclick=function(){ event.target --> 点击的那个标签对象 alert(event.target.innerText) } 补充知识点 1. 定时器示例 2. addEventListener
补充的定时器:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器示例</title> </head> <body> <input type="text" id="i1"> <input type="button" value="开始" onclick="start();"> <input type="button" value="结束" onclick="end();"> <script> var t; // undefined function f() { var dateObj = new Date(); // 获取i1标签 var i1Ele = document.getElementById("i1"); i1Ele.value=dateObj.toLocaleString(); } // 每隔一秒就执行一次f() function start() { f(); // 只创建一个定时器，有定时器的话我就不创建了 if (t === undefined) { t = setInterval(f, 1000); } } // 停止计时 function end() { clearInterval(t); // t现在是什么？ console.log("---> ", t) t = undefined; } </script> </body> </html>
<!--<!DOCTYPE html>--> <!--<html lang="zh-CN">--> <!--<head>--> <!--<meta charset="UTF-8">--> <!--<meta http-equiv="x-ua-compatible" content="IE=edge">--> <!--<title>定时器练习</title>--> <!--</head>--> <!--<body>--> <!--<input type="text" id="i1">--> <!--<input type="button" value="start" onclick="beginning();">--> <!--<input type="button" value="end" onclick="stop();">--> <!--<script>--> <!--var t; //提前声明一个变量,为后续做铺垫--> <!--function f(){--> <!--var dateObj=new Date();--> <!--//获取i1标签--> <!--var i1Ele=document.getElementById("i1");--> <!--i1Ele.value=dateObj.toLocaleString(); //把dateObj这个当前--> <!--// 时间的赋值变量转换成字符串,toLacaleString它本身就是--> <!--// 把当前时间转换成字符串的意思--> <!--}--> <!--//每间隔一秒就执行一次f()--> <!--function beginning(){--> <!--f();--> <!--//只创建一个定时器,有就不创建,没有则创建t就是计时器--> <!--if (t===undefined){--> <!--t=setInterval(f,500);--> <!--按照指定周期来调用函数,这里在括号里面写函数名,以及自定义时间,--> <!--}--> <!--}--> <!--//停止计时--> <!--function stop(){--> <!--clearInterval是函数被调用,这里是终止定时器--> <!--clearInterval(t);--> <!--//t现在是什么?--> <!--console.log("-–>",t)--> <!--t=undefined;--> <!--}--> <!--</script>--> <!--</body>--> <!--</html>-->
绑定多个事件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定多个事件</title> </head> <body> <input type="button" value="点我" id="i1"> <script> function f1() { console.log(1); } function f2() { console.log(2); } var i1Ele = document.getElementById("i1"); // i1Ele.onclick=function () { // // 点击之后要执行的函数 // f1(); // }; // // i1Ele.onclick=function () { // f2(); // }; // addEventListener， 绑定多个事件，不覆盖 i1Ele.addEventListener("click", f1); i1Ele.addEventListener("click", f2); </script> </body> </html>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>绑定多个事件</title> </head> <body> <!--这里是设定一个按钮--> <input type="button" value="kick me" id="i1"> <script> <!--定义两个函数--> function f1(){ console.log(1); } function f2(){ console.log(2); } //找到上面设定的那个按钮赋值给一个变量 var i1Ele=document.getElementById("i1"); // i1Ele.onclick=function(){ // f1(); //这样写后加载的会覆盖前面先加载的, // }; // // i1Ele.onclick=function(){ // f2(); // }; //addEventListener, 绑定多个事件,不覆盖 // 这里是把上面找到的变量,跟两个事件绑定到一起,这里就实现了同时绑定两个事件 // 关键字是addEventListener它就是绑定多个事件用的 i1Ele.addEventListener("click",f1); i1Ele.addEventListener("click",f2); </script> </body> </html>
今日内容开始:
jQuery是什么?
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
特点:write less,do more
它本身是一个别人写好的类库---前端专用名词,类似于我们之前学的模块,都是别人封装好的底层 的东西,我们直接拿过来用就可以了.这个概念也类似于我们的函数,也是封装好的功能,直接拿到页面上引用即可,方便快捷
jQuery怎么用,
引用jQuery文件,有两种方式: ===========>我们的jQuery文件必须要引用否则会报错,无法使用,不论是在html文件中还是在console里面都是一样的效果.
一种是放到当前文件夹里面,以本地文件的方式引用,
<script src="jquery-3.2.1.min.js"></script>
<script>按照jQuery的规则写代码</script>
另一种是cnd凡是引用,即在线引用,就是我们不需要下载到本地即可引用,
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>按照jQuery的规则写代码</script>
既然这里涉及到了在线引用的话就会牵扯出来版本问题,关于版本:
我们一般使用 3.x
jQuery.js 这个是完整版,
jQuery.min.js 这个是压缩的完整版
jQuery对象:
通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里面的方法,例如:$("#i1").html(). ===>这里的意思是获取id值为i1的元素的html代码,其中html()是jQuery的里面的方法.
下面是基础语法:
下面开始具体的使用方法:
选择器:
1,查找标签:固定的原则是 $("写入条件") 注:$后面是没有空格的
1,基本查找:
id 查找========> $("#id值")
class名查找==================> $(".class名")
标签名查找=================> $("标签名")
查找所有元素==========>$("*") ---一般不常用
组合查找================>$("#id,className,tagName") 这里在查询条件里面添加了三个条件.这三个条件是彼此独立的,互不干涉,互不影响,只要在查询的时候满足其中的一个条件就可以拿到返回结果,他们之间是分开的,彼此互不干扰的.
层级选择器:
这里的x和y可以是任何的选择器
所有后代查找(子子孙孙):$("x y")
所有儿子查找:$("x > y")
所有紧挨在x后面的y标签:$("x ~ y")
基本筛选器:
$("#d p")====>所有的id值为d的标签的所有的子孙标签为p标签的标签
:first $("#d p:first")===>在所有的排标签的基础上找到第一个满足条件的p标签
:last $("#d p:last")===>在所有满足条件的p标签中找到最后一个
:ep(index) 前面两个是找第一个和最后一个,这里是找指定位置的那一个,自定义索引值,注意是索引值,我们的索引都是从0开始的,$("#d p:eq(3)") ===>找到满足条件的p标签里面的索引值为3也就是第4个标签
:gt(index) 索引值大于自定义索引值的标签 =====>$("#d p:gt(3)")所有满足条件的p标签里面索引值大于3的p标签
:lt(index) 索引值小于自定义索引值的标签=========>$("#d p:lt(3)")所有满足条件的p标签里面索引值小于3的p标签
:not(选择器) 所选择的标签里面不含有自定义选择器的标签===>$("#d p:not(.c1)") 所有满足条件的p标签里面不含有c1类属性的p标签 ======>$("#my-checkbox input:not(:checked)")还有一类写法,这样写的区别是not括号里面的内容,checked前有一个冒号,如果没有这个冒号就得不到想要的结果,这句话的意思是我们要找到id值为my-checkbox的下面的input标签,然后再找到的input标签里面找没有被选中的input标签,选中是checked,这就需要把冒号加在checked前面
:even 所有偶数的标签 ==>$("#d p:event")所有满足条件的p标签里面索引为偶数的p标签
:odd 所有基数的标签====>$("#d p:odd")所有满足条件的p标签里面索引为基数的p标签
2,修改标签样式:
原生js:
获取样式类:document.getElementById("d1")
添加样式类:classList.add(.cls) ======>
移除样式类:classList.remove(.cls)=======>
jQuery修改标签样式:
获取样式类:$("#d1")[0] =====>获取id值为d1标签的样式类
添加样式类:addClass();========>$("#d1").addClass("c2") ====>给id值作为d1的标签添加类属性值c2
移除样式类:removeClass();=======>$("#d1").removeClass("c3")==>给id值作为d1的标签删除类属性值为c3的属性.
切换css类名,有就移除,没有就添加:toggleClass();========>$("#d1").toggleClass("c4")==>给id值为d1的标签做判断,如果有c4这个类属性那么就从重删除它,否则就把它添加上.
jquery中的三种等号分别的意思：
“=”：赋值运算，如下
var a = 3;
var b = "3"
var a1=null
var a2=undefined
var a3=0
var a4=false
“==”：等于，如下（类型不同，也可能相等）
a==b
true（这里之所以返回true是因为a是数字，b是字符串，在判断是否相等时，内部自动做了字符串和数字之间的转换，把字符串转换成了数字之后再去比较的，所以就是相等的，就返回了true）
a1==a2
true（这里的null和undefined类型不同，但是用“==”就是相等的，他们在内部自动进行了类型转换，返回的就是true）
a3==a4（这里的0和false类型不同，但是用“==”就是相等的，在内部把a3的赋值结果0转换成了false跟a4去做对比，或者是把a4的赋值结果false转换成了0跟a3去做对比，就返回了true）
true
“===”强等于，如下（类型必须相同，同时值也必须相同才相等）
a===b
false（很明显，数字跟字符串类型不同，返回false）
a1===a2
false（null和undefined类型也不同，返回false）
a3===a4
false（数字和bool值类型不同也无法相等，返回false）
后期更新
3,修改标签
4,创建标签/添加标签/删除标签
5,事件
6,动画
7,插件
8,Ajax