jQuery基础入门 jq选择器 注册事件 jQuery事件机制 animate自定义动画
1使用js的缺点
-
代码比较麻烦，需要遍历，可能还需要嵌套
-
找对象麻烦，方法少，还长
-
会有兼容性问题
-
如果想要实现简单的动画效果，jQ只需要 animate 自定义动画库
-
js注册事件的时候，可能会被覆盖
-
例子：css
<style> div{ height:200px; margin-bottom:10px; background-color:#d12345; display:none; } style> -
例子：html
<body> <input type="button" value="展示" id="btn1"> <input type="button" value="设置内容" id="btn2"> <div>div> <div>div> <div>div> body> -
利用js 找对象困难，而且需要遍历
<script> var btn1=document.getElementById('btn1'); var btn2=document.getElementById('btn2'); var divs = document.getElementsByTagName('div'); btn1.onclick = function(){ for(var i=0;i<divs.length;i++){ divs[i].style.display = "block" } } btn2.onclick = function(){ for(var i = 0;i<divs.length;i++){ divs[i].innerText="这是内容" } } </script> -
使用jQuery，代码简单，隐式迭代
<!-- 引入jquery -->
<script src="../js/jquery.js"></script>
<script>
//入口函数
$(document).ready(function(){
//注册事件
$("#btn1").click(function(){
// $("div").show(3000);
// $("div").slideDown(3000);
$("div").fadeIn(3000);
})
$("#btn2").click(function(){
$("div").text("这是内容");
})
})
</script>
什么是jQuery
- jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。如果你是一个 jQuery 新手，我们建议你先到jQuery 学习中心历练历练
- 中文文档：https://www.jquery123.com/
- javaScript 是一门编程语言
- jQuery 是一个javaScript 的库
入口函数
-
引入jquery 文件
-
js的入口函数执行要比jQuery的入口函数执行的晚一些
-
jq的入口函数会等待页面的加载完成才执行，但是不会等待图片的加载
-
js的入口函数会等待页面加载完成，并且等待图片加载完成才开始执行。
<script src="../js/jquery.js"></script> <script> //1、js 入口函数 window.onload = function () { console.log("这是js的入口函数"); } //2、jq入口函数 $(document).ready(function () { console.log("这是jQuery的入口函数的第一种写法"); }) //3、jq入口函数 $(function () { console.log("这是jQuery的入口函数的第二种写法"); }) </script>
jq对象与DOM对象的区别
-
html
<ul> <li id="yi">小毅li> <li>小花li> <li>小李li> ul> -
什么是DOM对象
//使用js的方式获取到的元素就是js对象(DOM 对象) var yi = document.getElementById("yi"); yi.style.backgroundColor="pink"; console.log(yi); -
什么是jq对象
//使用jq方式获取到的元素就是jq对象 var $li = $("li") $li.text("修改了内容") console.log($li); -
jq对象与js对象的区别
1、对象不能调用jq 对象的方法 2、jq 对象就是js对象的集合，是一个维数组，里面包含一大堆js对象和jq的方法 3、 jq对象不能直接调用js 对象的方法 $li[0].setAttribute("name","haha") -
jQ对象就是一个数组，里面有方法，有DOM 对象
-
jQuery对象转换成DOM对象：
//把dom对象直接放进jq对象中 $(yi).text("小仁") //利用index 取出 dom 对象 $li[1].style.backgroundColor = 'red'; //利用git 方法取出dom 对象 $li.get(2).style.backgroundColor = 'green'; -
利用jquery 隔行变色
<script> $(function(){ var $li = $("li") for (var i = 0; i < $li.length; i++) { if (i % 2 == 0) { $li[i].style.backgroundColor="pink"; }else{ $li[i].style.backgroundColor="hotpink" } } }) </script>
mouseenter与mouseover的区别
-
mouseenter
#鼠标只经过绑定事件的元素才会触发事件，且只触发一次 mouseener:鼠标进入事件 mouseleave：鼠标离开事件 -
mouseover
#鼠标经过元素的子元素也会触发事件 mouseover：鼠标经过事件 mouseout: 鼠标离开事件
$ 是一个 function
-
参数不同，功能就不同
$ === jQuery //ture -
$符号的3种用法
- 参数是一个function，入口函数
- 参数 dom对象，把dom对象转换成jq对象
- 参数是一个字符串，用来找对象
<script> // 1、参数是一个function，入口函数 $(function(){ }) //2、参数 dom对象，把dom对象转换成jq对象 $(document).ready(){ } //3、参数是一个字符串，用来找对象 $("div") $("#btn") $(".current") </script>
jQuery 选择器
-
什么是jQuery选择器
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。 jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】 jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 -
基础选择器
名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。 交集选择器 $(“div.redClass”); 获取class为redClass的div元素 总结：跟css的选择器用法一模一样。
-
层级选择器
名称 用法 描述 子代选择器 $(“ul>li”); 使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素 后代选择器 $(“ul li”); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等 总结：跟CSS的选择器一模一样。
-
过滤选择器
这类选择器都带冒号:
名称 用法 描述 :eq（index） $(“li:eq(2)”).css(“color”, ”red”); 获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 :odd $(“li:odd”).css(“color”, ”red”); 获取到的li元素中，选择索引号为奇数的元素 :even $(“li:even”).css(“color”, ”red”); 获取到的li元素中，选择索引号为偶数的元素 :gt(index) $(“li:gt(2)”) 选择索引号大于等于 2 的元素 （索引值为 2 3 4 的元素） :lt(index) $(“li:lt(2)”) 选择索引号小于 2 的元素 （索引值为 0 1 的元素） -
筛选选择器（方法）
名称 用法 描述 children(selector) $(“ul”).children(“li”) 相当于$(“ul>li”)，子类选择器 find(selector) $(“ul”).find(“li”); 相当于$(“ul li”),后代选择器 siblings(selector) $(“#first”).siblings(“li”); 查找兄弟节点，不包括自己本身。 parent() $(“#first”).parent(); 查找父亲 eq(index) $(“li”).eq(2); 相当于$(“li:eq(2)”),index从0开始 next() $(“li”).next() 找下一个兄弟 prev() $(“li”).prev() 找上一次兄弟
index() 方法
-
index() 方法返回当前元素在所有兄弟列表中的索引
$("li").click(function(){ console.log($(this).index()); })
css操作 .css
-
.css（）修改样式
$(function(){ $("li") .css('backgrounColor','pink') .css("color",'red')//字体颜色 .css("fontSize","32px") }) -
.css({}) 修改多个样式
$(function(){ //修改多个样式 $("li").css({ backgroundColor:"pink", color:"red", fontSize:"32px", border: "1px solid black" }) //获取样式 $("li").css("fontSize") //默认是第一个 li 的样式 }) -
添加 class 删除类 判断类 切换类
<script> $(function(){ //添加类 $("input").eq(0).click(function(){ $("li").addClass("class") } ) //删除类 $("input").eq(1).click(function(){ $("li").removeClass("class") }) //判断类 $("input").eq(2).click(function(){ if($("li").hasClass("class")){ $("li").removeClass("class"); }else{ $("li").addClass("class") } }) //切换类 $("input").eq(3).click(function(){ $("li").toggleClass("class") }) }) </script> -
tab切换 排他 siblings()方法
$("li").addClass("active").siblings().removeClass("active")
属性操作 .attr
-
属性 在style 里写的
-
对于布尔类型的属性，不要用attr() 方法，应该用 prop() 方法
-
attr() 方法，如果这个属性没有别定义的时候，它会放回一个undefined
-
移除某个属性removeAttr(name)
$("img").removeAttr("title") -
修改img的alt 属性和title属性
<script> $(function(){ $("img").attr("alt","图破了"); $("img").attr("title","错错错"); }) </script> -
获取属性值
<a href="imges/1.jpg" > <img src="images/2.jpg"></img> </a> $("a").click(function({ var href = $(this).attr("href"); $("img").attr("src",href) // 把img的src='images/2.jpg' 修改为src='imges/1.jpg' }))
属性操作 prop 方法 用来操作布尔类型的属性
-
prop 方法用来操作布尔类型的属性
// html <input type="button" value="选中"> <input type="button" value="不选中"> <input type="checkbox" id="ck"> //js $(function(){ $("input").eq(0).click(function(){ $("#ck").attr("checked",true); }) $("input").eq(1).click(function(){ $("#ck").attr("checked",false) }) }) -
prop()方法操作布尔类型的属性： disabled checked selected
shw() hide() 方法
-
显示/隐藏 一个元素
-
show 和 hide
- show() 的最终状态 display:block
- hide() 的 最终状态 display：none
$("div").show(1000) $("div").hide(fast) -
show(speed,callback),有两个参数一个是 时间一个是 回调函数
$("div").show(1000,function(){ console.log("哈哈哈"); })
fadeIn() fadeOut() 方法
-
显示选择的元素的内容，隐藏其他兄弟的元素的内容
-
fadeIn() 和 fadeOut
- fadeIn() 的最终状态：display:block
- fadeOut() 的最终状态： dsiplay:none
$("li").eq(index).fadeIn().siblings("li").fadeOut() -
fadeIn(speed,callback)
$("li").eq(index).fadeIn(100,function(){ console.log("哈哈") })
slideDown() 和slideUp() (slideToggle)
-
slideDown() 和slideUp()
- slideDown()的最终状：display:block
- slideUp() 的最终状态： display:none
-
先让div 显示然后再隐藏
$(function(){ $("input").click(function(){ $("div").slideDown(1000).slideUp(1000) }) })
animate 自定义动画
- 可以利用animate 方法定义动画
<script> $("input").click(function(){ $("div") .animate({ left:800}) .animate({ top:400}) .animate({ width:400,height:400}) }) </script>
stop（）方法停止动画
-
触发动画事件之后，动画事件将会加到动画队列中，有时我们不需要它每一个都执行
-
可以利用stop 方法停止当前正在执行的动画
-
就是停止以前的动画，执行需执行的动画
$(function(){ //给 li 注册鼠标经过事件，让自己的ul 显示出来 ,每一个li 下有 ul $("li").mouseenter(function(){ $(this).children("ul").stop().slideDown() }) //给 li 注册 鼠标离开事件 $("li").children("ul").stop().slideUp(); })
添加节点
-
案例
-
html 代码
<body> <div> 我是div div> <p>我是div外面的p标签p> body> -
jq 添加节点 的方法
<script> $(function(){ // 把 p 标签添加的 div 里面 $("div").append($("p")) $("p").appendTo("div") // 在 div 内容的前面添加一个 h4 标签 $("div").prepend("标题
") //在 div 前面/后面添加一个 p 标签 作为兄弟节点 $("div").before($("p")) $("div").after($("p")) }) -
jq 添加节点 append 方法的注意点 要特别注意 第2行代码 和 第3行代码
//如果标签就会 添加文字 $("div").append("添加文字") //这里是添加一个字母 而不是 $("div").appepend("p") //而下面是添加 p标签到 div 里面 $("p").appendTo("div")
清空 删除 克隆 节点
-
html() 方法 清空 子代，本身没有删除 这个方法会发生内存泄露
//清空div 的内容，但是没有清除 标签 绑定的内容 $("div").html("") -
empty() 方法清空内容 ，不会发生内存泄露 删除的是子代 本身没有删除
$("div").empty() -
remore() 删除节点，本身和子代节点 都删除掉
$("div").remove() -
克隆节点 clone()
-
可以传两个参数 true false
-
false:默认，深度复制，不会复制事件
-
ture: 也是深度复制 会复制事件
//把 p 标签的绑定的方法也克隆 $(".p").clone(true).appendTo("div") //没有克隆 p 标签绑定的的方法
-
方法加不加括号的区别
-
不加括号，直接不需要点击就可以触发弹窗
$(".p").click( alert("哈哈") ) -
加了括号，需要点击才可以触发弹窗
$(".p").click(function(){ alert("哈哈") })
val 方法
-
val 方法对的 value 的操作
-
val方法获取valee值
$("input").val() $("input").attr() -
val 方法获取value 值
$("input").val("哈哈") $("input").val("呵呵") -
鼠标进入如果value是默认值，清空内容，鼠标离开时value如果null，设置value 为默认值
<script> $(function(){ $("#text").focus(function(){ if($(this).val() == "请数入密码"){ $(this).val(""); } }) $("#text").blur(function(){ if($("#text").val() == ""){ $(this).val("请数入密码"); } }) }) </script>
html 方法和text方法
-
html 可以识别标签，text 不可以识别标签
-
在没标签的时候，两个方法都可以用
-
如果想要识别标签可以使用html
-
如果要防止攻击，用text
-
获取
$(“div”).html() 得到的带有 P标签的文本
$(“div”).text() 得到的是没有带标签的文本
<div><p>我是标题/div> <script> $(function () { console.log($("div").html()) console.log($("div").text()) }) </script> -
写入
$("div").html("这是html方法
") //这是html方法 $("div").text("这是text方法
") //这是text方法
width与height方法
-
获取元素的的宽高
<script> $(function () { console.log($("div").width()); console.log($("div").height()) }) </script> -
设置元素的宽高
$("div").width(500); $("div").height(300); -
获取元素的大小
$("div").width(); //width 内容区 $("div").innerWidth(); //width + padding $("div").outerWidth(); //width + padding + border $("div").outerWidth(true); //width + padding + border + margin -
动态获取可视区的位置
$(window).resize(function(){ console.log($(window).width()) console.log($(window).height()) })
scrollTop与scrollLeft
-
设置或者获取垂直滚动条的位置
//获取页面被卷曲的高度 $(window).scrollTop(); //获取页面被卷曲的宽度 $(window).scrollLeft();设置或者获取垂直滚动条的位置 -
获取垂直滚动条的位置
<script> $(window).scroll(function(){ console.log($(window).scrollTop()); console.log($(window).scrollLeft()); }) </script>
offset方法与position方法
-
offset方法获取元素距离document的位置
-
position方法获取的是元素距离有定位的父元素的位置。
//获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position();
jQuery事件机制
-
简单事件 给自己注册的事件,单击事件
$("div").click(function(){ alert("哈哈") }) -
委托事件 delegate( )
要给div 注册一个委托事件 但是最终不是由div 执行，而是由子代的p执行
第一个参数：selector :事件最终由谁来执行，
第二个参数：事件的类型
第三个参数：事件的处理函数
// 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $("div").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 }); -
委托事件原理：在点击之后 p ，div就会给 P 增加一个事件
-
委托事件的好处
动态创建的元素，也有注册了事件
性能方面更快，因为是点击 div 之后，才给p 元素注册事件,不点击，就不会注册事件
<input type="button" value="添加P" id="btn"> <div> </div> <p>这是div外的P标签</p> //为什么下面的几行代码只能添加一次 P 标签的到div 中 $('input').click(function(){ $('p').appendTo('div') }) //注册委托事件 $('div').delegate("p",'click',function(){ console.log("p标签有点击事了") })
on 注册事件的两种方法
-
on方法的3个参数
1、事件的类型 2、注册的对象 3、function -
注册简单事件，给自己注册事件
//on 的第一种方法，注册简单事件,给input 按钮则注册事件 $('input').on('click',function(){ $("这是新建的P元素
").appendTo('div') }) //给 p 注册点击事件 $('p').on('click',function(){ alert('hh') }) -
注册委托事件，这样动态创建的 p 有点击事件
$('input').on('click',function(){ $("这是新建的P元素
").appendTo('div') }) // on 的第二种方法，注册委托事件 $('div').on('click','p',function(){ alert("哈哈哈") }) -
先执行委托事件，在执行自己本身有的事件（先p 再div ）
事件的执行顺序
-
先执行委托事件，在执行自己本身有的事件（先p 再 div ）
-
新添加的P，只有委托事件和div的事件
<style> div{ width:500px; height:400px; background-color: #ccd; } </style> <input type="button" value="添加" id="btn"> <div> <p>ppppp</p>// p自己的是事件=> 委托事件=> div 的事件 <p>ppppp</p> <p>ppppp</p> </div> <script> $(function(){ $("p").on('click',function(){ alert("P标签的简单事件") }); $("div").on('click','p',function(){ alert("委托事件") }) $('div').on('click',function(){ alert("div的简单事件") }) $('#btn').on('click',function(){ $("我是新建的p元素
").appendTo('div') }) }) </script>
事件的解绑和触发
-
off() 解绑事件
-
不填参数，删除所有的事件
-
移除 p 元素的mouseenter 事件
<script> $(function(){ $('p').on('click mouseenter',function(){ alert("hello 小毅加油") }) // 不填参数，删除所有的事件 // $("p").off() // 移除 p 元素的mouseenter 事件 $("p").off('mouseenter') }) </script> -
事件的触发
$("#btn").on("click",function(){ // 触发 p 元素的点击事件 // $('p').click() $("p").trigger("click") })
阻止浏览器默认行为和事件冒泡
-
案例
<a href="http://fanyi.baidu.com">百度一下</a> <script> $(function(){ $('a').on('click',function(e){ alert("哈哈哈") //阻止浏览器默认行为 // return false; e.preventDefault(); //阻止事件冒泡 e.stopPropagation(); }) $("body").on('click',function(){ alert("事件冒泡了") }) }) </script> -
阻止浏览器默认行为
e.preventDefault(); -
阻止事件冒泡
e.stopPropagation(); -
阻止事件冒泡同时阻止浏览器默认行为
return false;
链式编程和end方法
each()方法
-
普通的for 循环
for(var i = 0; i<$("li").length;i++){ $("li").eq(i).css("opacity",(i+1)/10) } -
each()方法循环
$("li").each(function(index,element){ $(element).css("opacity",(index+1)/10); })
$ 冲突问题
-
可以修改入口函数
$(funciton(){ }) jQquery(function(){ }) -
jQquery 释放 $ 的控制权
// $$ 就相当于$的功能，而 $ ！= jQqury 了，$变成普通的符号 var $$ = $.noConflict();
插件
- jquery不可能包含了所有的功能，我们可以插件拓展jquery的功能
- jQquery 有着丰富的插件功能，使用这些插件能给jQquery提供一些额外的功能
jquery-color.js 实现颜色渐变效果
-
代码
<style> div{ width: 500px; height: 500px; background-color:brown; } </style> </head> <body> <div></div> <script src="../../js/jquery.js"></script> <script src="../../js/jquery.color.js"></script> <script> $('div').animate({ backgroundColor:'yellow'},2000) </script> </body>
jquery-lazyload.js实现懒加载效果
-
代码：
<style> div{ height:3000px; } </style> </head> <body> <img src="./1.jpg" > <div></div> <!-- 第二步：将src 改为data-ariginal 浏览器无法加加载图片--> <img class="lazy" data-original="./1.jpg"> <script src="../../js/jquery.js"></script> <!-- 第一步 :引入插件--> <script src="../../js/jquery.lazyload.js"></script> <script> $(function(){ $('.lazy').lazyload();// 第三步：调用lazyload,实现懒加载 }) </script>