jQuery常用知识点汇总

Posted 2020-10-11

1、$("selector") 选择器

jQuery中取元素对象的方法，等效于 jQuery("selector")

$("div")、$("#id")、$(".class")

$("div,p,#id") 同时获取多个元素对象

$("div p") 获取div 所有后代元素中的所有p 元素对象

$("div>p") 获取div 子元素中的p 元素对象

$("div+p") 获取div 元素紧接着的下一个p元素对象

$("div *") 获取div 元素内的所有元素对象

2、过滤器

$("li:first")、$("li:first-child") first表示（所有父元素合并后的）第一个li元素；first-child表示（每个父元素的）第一个li元素（数组）

$("li:last")、$("li:last-child")   last表示（所有父元素合并后的）最后一个li元素；last-child表示（每个父元素的）最后一个li元素（数组）  

$("div:contains(text)") 获取包含text 文本的div 元素对象

$("div:has(‘p‘)") 获取包含p 元素的div元素对象

$("p:hidden") 获取隐藏的p 元素对象

$("p:visiable") 获取可视的p 元素对象

$("li:even") 获取数组中下标为偶数的元素对象，从0 开始计数

$("li:odd") 获取下标为奇数的元素对象，从0 开始计数

$("li:eq(index)") 获取下标为index 的元素对象，index 从0 开始

$("li:gt(index)") 获取下标大于index 的元素对象，index 从0 开始

$("li:lt(index)") 获取下标小于index 的元素对象，index 从0 开始

$("div[title=‘t1‘]") 获取属性值title 为‘t1‘的div 元素对象

$("div[title!=‘t1‘]") 获取属性值title 不为‘t1‘的div 元素对象

$("div[title*=‘t1‘]") 获取属性值title 包含‘t1‘字符串的div 元素对象

3、表单中的过滤器:

input,text,password,submit,button,radio,checkbox,image，checked，selected

$("formtest:input") 表单选择器，获取表单formtest 中的所有input 元素对象

$("formtest:text") 表单文本选择器，选取表单中单行文本输入框元素对象<input type=‘text‘>

$("formtest:password")

$("formtest:checked") 选中状态选择器

$("formtest:selected") select元素下的option 元素被选中的元素对象

4、jQuery方法

1）attr()  设置或返回被选元素的属性值

$("img").attr("src");

$("img").attr({ src: "test.jpg", alt: "Test Image" });

$("img").removeAttr("src"); 移除元素属性

val(‘hello‘) 返回或设置元素value 属性的值

2）addClass(class) 为元素添加类选择器样式,class为类名，不需加点号

removeClass(class) 移除类选择器

toggleClass(class) 切换删除添加

hasClass(class) 是否包含某类

3）remove() 删除元素及其所有子元素

empty() 删除所有子元素

4）find(expr) 获取当前元素所有符合表达式的后代元素，并以jQuery对象的形式返回，若有多个返回，则返回jQuery数组

   $("#id").find("#child");

   $("#id").find(".child");

   $("#id").find("input[type=‘image‘]");

5）html(‘<h3>hello</h3>‘)：返回或设置元素的文本值，文本值中的标签可以被html识别

text(‘hello‘)：返回或设置元素的文本值，文本值中的标签不可被html识别

 6）css()  返回或设置元素的css 样式

$("p").css("color");

$("p").css({ "color": "#ff0011", "background": "blue" });

7）offset()：获取元素在当前视口的相对偏移,返回的对象包含两个整型属性：top 和 left

position() ：获取元素相对父元素的偏移。返回的对象包含两个整型属性：top 和 left

scrollTop([val])：返回或设置元素距滚动条顶部的偏移

scrollLeft([val])：返回或设置元素距滚动条左侧的偏移

var offset = p.offset(); offset.left,offset.top 

$("div.demo").scrollLeft(300);

8）页面构建

$(selector).append(content) 向元素内部末尾追加一段内容

$(selector).prepend(content) 向元素内部开头追加一段内容

$(content).appendTo(selector) 将内容添加到元素中,默认尾部

$(selector).before(content) 在元素之前插入内容

$(selector).after(content) 在元素之后插入内容

$(selector).clone() 复制当前元素

$(selector).replaceWith(content) 用content来替换selector

$(selector).wrap(wrapper) 用wrapper 来包裹selector $("p").wrap("<div></div>")

$(selector).each(function(index){}) 依次遍历该元素集合，index 为当前遍历元素的索引，从0 开始

5、jQuery事件、方法

1）ready()事件

页面加载时触发ready()事件,类似于onLoad()事件，但前者只要页面的DOM结构加载后便触发，而后者必须在页面全部元素加载成功才触发，ready()可以写多个，按顺序执行。 $(document).ready(function(){}); == $(function(){});

2）bind()、on( )：为元素绑定事件，$(selector).bind(event1 event2,[data] function)

unbind()、off( )：为元素解除绑定事件，$(selector).unbind(event1 event2)

one()：为元素绑定事件，但该事件只会触发一次，随后事件被解除。$(selector).one(event,[data],fun)

3）trigger()：手动触发指定事件，$(selector).trigger(event)

4）hover()：鼠标移入移出事件，当鼠标移到所选元素上时，执行第一个函数，移出时，执行第二个函数。$(selector).hover(over，out);

5）toggle()：单机循环事件，可以为元素的click事件绑定多个回调函数，当点击该元素时依次循环执行该事件中的方法

    $(selector).toggle(fun1(),fun2(),funN(),...);

该方法也可用于切换被选元素的hide()与show()，$(selector).toggle(speed,callback); //speed单位为毫秒

6）focus()：当元素取得焦点时触发

blur()：当元素丢失焦点时触发

change()：当元素的值发生变化时触发

6、jQuery动画效果

hide(speed,function(){})，show(speed,function(){})：隐藏和显示元素,speed，变化速度，function，变化完成后所调用函数

toggle(speed,function(){})：切换显示和隐藏元素

slideUp(speed,function(){}):向上滑动，应用与可视的元素，收起

slideDown(speed,function(){})：向下滑动，应用于隐藏的元素，下拉

slideToggle(speed,function(){}):切换滑动方式

fadeIn(speed,function(){})：淡入隐藏的元素

fadeOut(speed,function(){}):淡出可视的元素

fadeToggle(speed,function(){}):淡入淡出的切换

fadeTo(speed,opacity)：设置透明度（0.0~1.0）

animate({params},speed,function)：params为对象的样式，将对象逐渐过渡到该样式(移动时该对象的position需为absolute或relative)

stop(param1,param2)：停止正在执行的动画，param1为是否停止，param2为是否完成正在执行的动画

delay(duration)：延迟执行动画，动画正在执行的时候，一定时间后再执行

8、noConflict：解除$ 与jQuery的对应关系，避免$ 冲突

     var jQ = $.noConflict(); //解除对应关系并定义变量jQ 来表示jQuery

10、遍历

向下遍历：children( )，获取当前元素的所有子元素，不包括孙元素。

$("div").children();

$("div").children(".selected");

向上遍历：parent( )，获取直接父元素

parents( )，获取所有父元素

parentsUntil(end)，获取当前元素与end 元素之间的父元素

同级遍历：siblings( )，获取所有同级元素

next( )，获取下一个同级元素

nextAll( )，获取下面的所有同级元素

nextUntil( ),下面区间内同级元素

prev( )，获取上一个同级元素

prevAll( )，获取上面的所有同级元素

prevUntil( ),上面面区间内同级元素

11、jQuery版本：

1.x ：支持 IE 6+

2.x：支持 IE 9+

12、jQuery 文件引入须在自定义js 文件之前，后者依赖前者存在。

14、阻止冒泡事件

event.stopPropagation(); //阻止向父级元素的冒泡

event.stopImmediatePropagation(); //阻止所有的冒泡事件

15、添加元素

function appendText(){

var text1 = "<p>11111</p>"; //HTML

var text2 = $("<p></p>").text("22222"); //jQuery

var text3 = document.createElement("p"); //DOM

text3.innerHTML = "33333";

$(‘body‘).append(text1,text2,text3);

}

16、$(this)执行jQuery对象，this指向DOM对象。故$(this)可调用jQuery的方法，使用时尽量使用该方式来获取当前对象。

17、var obj = event.srcElement ? event.srcElement : event.target; //IE、Firefox 获取当前事件的触发源对象