jQuery中常用的选择器、方法、插件的总结

╰半橙微兮° 2022-05-21 10:39 211阅读 0赞

**jQeury顶级对象 缩写$**

1、$(document).ready(function()\{  
  
\})

缩写  
$(function()\{  
\})  
**dom加载完成后触发**  
window.onload $(window).load()  
只能注册一个方法  
页面所有内容加载完成后触发（图片，css，js都加载）

**2、jQuery对象(包装集) dom对象**  
 var div = document.getElementById("id") dom对象  
var div = $(".class") 包装集,对dom对象包装，返回的是很多个dom对象

**3、each map**

**4、jQeury选择器**  
$("\#id")  
$(".class")  
$("input")  
复合选择器 $("\#id,.class,input")  
\*

5、$(who).when(what) $("\#btn").click(function()\{\})

**6、层次选择器**  
 $("div p") 包含选择器 div中所有的p 子元素 子子元素..  
$("div > p") 子后代选择器 div中直接子后代

**7、常用的方法**html() text() val() attr() css() removeAttr()  
addClass() removeClass() toggleClass()

**8、简单选择器**  
 :first 选取第一个元素 $("div:first")  
:last 选取最后一个元素  
:not(选择器) 选取不满足“选择器”条件的元素$("div:not(\#id)")  
:even、:odd，选取索引是奇数、偶数的元素  
:eq(索引序号)、:gt(索引序号)、:lt(索引序号)

**9、设置样式**  
addClass("myclass")(不影响其他样式)  
removeClass("myclass")移除样式  
toggleClass("myclass")如果存在样式则去掉样式，如果没有样式则添加样式  
hasClass("myclass")判断是否存在样式  
10、链式编程  
$(this).css("background-color", "red").siblings().css("background-color", "white");

\---------------------------

**11、属性过滤选择器**  
$("div\[id\]")选取有id属性  
$("div\[title=test\]")选取title属性为test的元素  
$("div\[title!=test\]")选取title属性不为test的元素  
etc....查看帮助

**12、表单选择器**  
$(":input")匹配所有 input, textarea, select 和 button 元素  
$(":text")匹配所有 匹配所有的单行文本框  
$(":checkbox")匹配所有复选框  
etc.....查看帮助

**12.1表单对象选择器**  
$(":checkbox:checked")  
$("select option:selected")  
$("input:disabled")  
$("input:enabled")

**13、动态创建Dom**  
var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象，只是在内存中  
$("div:first").append(link); 把动态创建的jquery对象，加到第一个div中  
  
动态创建dom注意：  
var some = $("<div id='d1'>a<p></p>c</div>")  
当把动态创建的节点添加到窗体前，不能通过$("\#d1")访问到它  
必须先把some追加到窗体  
$("div:first").append(some);  
才可以通过$("\#d1") 中找到它

append 把link元素追加到哪$("div:first").append(link);  
appendTo link.appendTo("div:first")  
在结束标签之前添加元素  
prepend  
prependTo  
在开始标签之后添加元素  
after  
  
在结束标签外添加元素  
before  
  
在开始标签前添加元素

**14、删除节点**  
remove() 删除当前节点  
empty() 清空当前节点之间的内容，节点保留

\----------------------  
**15、绑定事件**  
绑定事件 $("\#id").bind("click",function()\{\})  
解除绑定 $("\#id").unbind("click")  
让事件只执行一次 $("\#id").one("click",function()\{\})  
合成事件hover toggle  
hover(enterfn,leavefn) 当鼠标放上时执行enterfn，当鼠标离开时执行leavefn  
toggle(fn1,fn2) 当鼠标第一次点击时执行fn1，第二次点击执行fn2，以后依次执行

**16、事件冒泡**  
 mouseover、mouseenter mouseover会事件冒泡，mouseenter不会  
mouseout、mouseleave  
  
阻止事件冒泡  
$("\#d1").click(function(e)\{ e.stopPropagation();\})

**17、\*事件参数**  
pageX、pageY  
target 获得触发事件的元素  
altKey、shiftKey、ctrlKey  
keyCode 键盘码、charCode ascii码  
**18、动画**  
show()、hide()  
toggle() 切换显示隐藏  
slideDown、slideUp、 fadeOut、fadeIn  
animate 复杂动画