笔记-jQuery

jQuery简介

jQuery是一个JavaScript函数库。

jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

jQuery库包含以下功能：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

$(document).ready：作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

选择器

基本选择器：

1. id选择器：$("#id")

2. 类选择器：$(".class")

3. 元素选择器：$(“element”)

4. 全选择器：$("*")

   //:eq 选择单个

   //:lt 选择匹配集合中所有索引值小于给定index参数的元素

   //:gt 选择匹配集合中所有索引值大于给定index参数的元素

层级选择器：

内容筛选选择器

https://www.imooc.com/code/8345

可见性筛选选择器

属性筛选选择器

 //查找所有div中，属性name=p1的div元素
 $('div[name=p1]')

https://www.imooc.com/code/8347

子元素筛选选择器

//查找class="first-div"下的第一个a元素
//针对所有父级下的第一个
$('.first-div a:first-child')
//查找class="last-div"下的第二个a元素
$('.last-div a:nth-child(2)')

表单元素选择器

//查找所有 input, textarea, select 和 button 元素

$(":input")

//匹配所有input元素中类型为text的input元素

$(“input:text”)

表单对象属性筛选选择器

//查找所有input所有可用的（未被禁用的元素）

$(“input:enabled”)

属性与样式

.attr()和.removeAttr()

获取/设置元素 删除元素

html()及.text()

读取、修改元素的html结构或者元素的文本内容，其中.html()（包括 HTML 标记）

.addClass()和removeClass()

动态增加/删除class类名

.toggleClass( )

通过toggleClass方法动态添加删除Class，一次执行相当于addClass，再次执行相当于removeClass

.css()和 .addClass()

.addClass()的本质是通过定义个class类的样式规则(在前面定义css)，给元素添加一个或多个类。css方法是通过JavaScript大量代码进行改变元素的样式

通过.addClass()我们可以批量的给相同的元素设置统一规则，变动起来比较方便，可以统一修改删除。如果通过.css()方法就需要指定每一个元素是一一的修改，日后维护也要一一的修改，比较麻烦

.addClass()不能获取，只是增删；.css(x)可以获取，两个参数就是设置

DOM操作

插入append()与appendTo()

删除remove()与empty()

jQuery remove() 方法删除被选元素及其子元素。 可接受一个参数，允许您对被删元素进行过滤。

jQuery empty() 方法删除被选元素的子元素。

克隆clone()

$("div").clone()   //只克隆了结构，事件丢失
$("div").clone(true) //结构、事件与数据都克隆

遍历

1. 祖先

$(“span”).parent() 返回被选元素的直接祖先元素

$(“span”).parents() 返回被选元素的所有祖先元素，可选参数来过滤对祖先元素的搜索，如(“ul”)，是

• 类型元素的祖先元素。

$(“span”).parentsUtil(“div”) 返回介于两个给定元素之间的所有祖先元素。

2. 后代

$(“div”).children(“p”) 返回每个

元素的所有 直接p子元素：

$(“div”).find(“参数”) 返回所有的后代元素，可指定

3. 同胞

向后遍历的

$(“h2”).siblings() 返回

的所有同胞元素，可加参数进行过滤，如 $(“h2”).siblings(“p”)

$(“h2”).next() 返回被选元素的下一个同胞元素。

$(“h2”).nextUntil(“h6”) 返回介于两个给定参数之间的所有跟随的同胞元素。

向前遍历的

prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。

4. 过滤

first(),last()

$(“p”).eq(0) 返回被选元素中带有指定索引号的元素。

5.each()

jQuery.each(array, callback )
jQuery.each(object, callback )

事件

事件名	作用
click()	鼠标单击触发事件
dbclick()	鼠标双击触发事件
mouseenter()	鼠标指针到达元素时触发事件
mouseleave()	鼠标指针离开元素时触发事件
mousedown()	鼠标在元素上方在按下时触发事件
mouseup()	鼠标在元素上方在松开时触发事件
hover()	mouseenter()和mouseleave()的结合版
focus()	元素获得焦点时(tab/点击)触发事件
blur()	元素失去焦点时触发事件

on(): 所有的快捷事件在底层的处理都是通过on()来处理的，

它可以绑定多个事件来触发函数，如：

$("#element").on("mousedown()  mouseup()",function(){ }); 

也可以多个事件绑定不同函数，如：

$("#element").on({
	mousedown:function(){},
	mouseup:function(){}
});

委托机制：

.on( events ,[ selector ] ,[ data ], handler(eventObject) )
实例：$("div").on("click","p",fn)

给div绑定一个click事件，并没有给p绑定，通过委托机制，当点击div里时，事件会像冒泡一样，一直到div元素，这里提供了[ selector ]也就是p，所以会到p的时候触发处理函数。

详情： https://www.cnblogs.com/liugang-vip/p/5616484.html

trigger(): 根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

优点：1.可以传参数 2.可以绑定自定义事件

实例：

<script>
	$("#btn").on("testClick",function(a,b){
		alert("自定义事件触发");
	})
	$("#btn").trigger("testClick",[a,b]);
</script>

submit()：提交表单时发生的事件

    //回车键或者点击提交表单
    $('#target1').submit(function(e) {
        alert('捕获提交表达动作,不阻止页面跳转')
    });
    //回车键或者点击提交表单,禁止浏览器默认跳转：
    $('#target2').submit(function() {
        alert('捕获提交表达动作,阻止页面跳转')
        return false;
    });

动画

隐藏/显示

hide(speed,callback) / show(speed,callback)，参数为可选

speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

callback 参数是隐藏或显示完成后所执行的函数名称。

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle()为hide()和show()之间的切换

淡入淡出

fadeIn(speed,callback) / fadeOut(speed,callback)

fadeToggle()是在fadeIn()和fadeOut之间的切换

滑动

slideDown() / slideUp() / slideToggle()

动画

animate({params},speed,callback) 创建自定义动画。

其中params为css属性。

该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。

stop() 方法用于停止动画或效果，在它们完成之前。

jQuery方法链接

$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);