JQuery入门总结(二)【选择器、方法应用】
1、$(document).ready(function(){
})
dom加载完成后触发
window.onload
只能注册一个方法
页面所有内容加载完成后触发(图片,css,js都加
缩写
$(function(){
})
2、jQuery对象(包装集) dom对象
var div = document.getElementById("id") dom对象
var div = $(".class") 包装集,对dom对象包装,返回的是很多个dom对象
3、jQeury选择器
$("#id")
$(".class")
$("input")
复合选择器 $("#id,.class,input")
4 $(who).when(what) $("#btn").click(function(){})
5、层次选择器
$("div p") 包含选择器 div中所有的p 子元素 子子元素..
$("div > p") 子后代选择器 div中直接子后代
6、常用的方法html() text() val() attr() css() removeAttr()
addClass() removeClass() toggleClass()
7、简单选择器
:first 选取第一个元素 $("div:first")
:last 选取最后一个元素
:not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
:even、:odd,选取索引是奇数、偶数的元素
:eq(索引序号)、:gt(索引序号)、:lt(索引序号)
8、设置样式
addClass("myclass")(不影响其他样式)
removeClass("myclass")移除样式
toggleClass("myclass")如果存在样式则去掉样式,如果没有样式则添加样式
hasClass("myclass")判断是否存在样式
9、链式编程
$(this).css("background-color", "red").siblings().css("background-color", "white");
10、属性过滤选择器
$("div[id]")选取有id属性
$("div[title=test]")选取title属性为test的元素
$("div[title!=test]")选取title属性不为test的元素
etc....查看帮助
11、表单选择器
$(表单有的input标签
$(":input")匹配所有 input, textarea, select 和 button 元素
$(":text")匹配所有 匹配所有的单行文本框
$(":checkbox")匹配所有复选框
etc.....查看帮助
11.5、表单属性选择器
$(":checkbox:checked") 所有选中的checkbox
12、动态创建Dom
var link = $("百度");动态创建jquery对象,只是在内存中
$("div:first").append(link); 把动态创建的jquery对象,加到第一个div中
动态创建dom注意:
var some = $("
$("#d1").text() 不可以,因为$("#d1")在窗体上去找对象了,但是some现在在内存中,还没加载到窗体
当把动态创建的节点添加到窗体前,不能通过$("#d1")访问到它
必须先把some追加到窗体
$("div:first").append(some);
才可以通过$("#d1") 中找到它
append 把link元素追加到哪$("div:first").append(link);
appendTo link.appendTo("div:first")
在结束标签之前添加元素 加子节点
直接把元素移动过去,并且包含所有事件
prepend
prependTo
在开始标签之后添加元素 加子节点
after
afterTo
在结束标签外添加元素 加兄弟节点
before
beforeTo
在开始标签前添加元素 加兄弟节点
13、删除节点
remove() 删除当前节点
empty() 清空当前节点之间的内容,节点保留
14、*替换节点
$(“br”).replaceWith(“
”);
15、*包裹节点
wrap()将所有元素逐个用指定标签包裹
16、绑定事件
绑定事件 $("#id").bind("click",function(){})
解除绑定 $("#id").unbind("click",function(){})
让事件只执行一次 $("#id").one("click",function(){})
合成事件hover toggle
hover(enterfn,leavefn) 当鼠标放上时执行enterfn,当鼠标离开时执行leavefn 封装mouseover,mouseout
toggle(fn1,fn2) 当鼠标第一次点击时执行fn1,第二次点击执行fn2,以后依次执行 封装click
17、事件冒泡
mouseover、mouseenter mouseover会事件冒泡,mouseenter不会
mouseout、mouseleavemouseleave会阻止事件冒泡
阻止事件冒泡
$("#d1").click(function(e){ e.stopPropagation();})
18、*事件参数
pageX、pageY
target 获得触发事件的元素(事件冒泡的起始) 相当于event.srcElement
altKey、shiftKey、ctrlKey
当键盘按下 keyCode 键盘码、which ascii码
当鼠标按下的时候which可以获取鼠标左右键(1,3)
19、动画
show()、hide()
toggle() 切换显示隐藏
slideDown、slideUp、 fadeOut、fadeIn
animate 复杂动画
网页标题:JQuery入门总结(二)【选择器、方法应用】
网页URL:http://azwzsj.com/article/jeggeg.html
})
dom加载完成后触发
window.onload
只能注册一个方法
页面所有内容加载完成后触发(图片,css,js都加
缩写
$(function(){
})
2、jQuery对象(包装集) dom对象
var div = document.getElementById("id") dom对象
var div = $(".class") 包装集,对dom对象包装,返回的是很多个dom对象
3、jQeury选择器
$("#id")
$(".class")
$("input")
复合选择器 $("#id,.class,input")
4 $(who).when(what) $("#btn").click(function(){})
5、层次选择器
$("div p") 包含选择器 div中所有的p 子元素 子子元素..
$("div > p") 子后代选择器 div中直接子后代
6、常用的方法html() text() val() attr() css() removeAttr()
addClass() removeClass() toggleClass()
7、简单选择器
:first 选取第一个元素 $("div:first")
:last 选取最后一个元素
:not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
:even、:odd,选取索引是奇数、偶数的元素
:eq(索引序号)、:gt(索引序号)、:lt(索引序号)
8、设置样式
addClass("myclass")(不影响其他样式)
removeClass("myclass")移除样式
toggleClass("myclass")如果存在样式则去掉样式,如果没有样式则添加样式
hasClass("myclass")判断是否存在样式
9、链式编程
$(this).css("background-color", "red").siblings().css("background-color", "white");
10、属性过滤选择器
$("div[id]")选取有id属性
$("div[title=test]")选取title属性为test的元素
$("div[title!=test]")选取title属性不为test的元素
etc....查看帮助
11、表单选择器
$(表单有的input标签
$(":input")匹配所有 input, textarea, select 和 button 元素
$(":text")匹配所有 匹配所有的单行文本框
$(":checkbox")匹配所有复选框
etc.....查看帮助
11.5、表单属性选择器
$(":checkbox:checked") 所有选中的checkbox
12、动态创建Dom
var link = $("百度");动态创建jquery对象,只是在内存中
$("div:first").append(link); 把动态创建的jquery对象,加到第一个div中
动态创建dom注意:
var some = $("
ac
")$("#d1").text() 不可以,因为$("#d1")在窗体上去找对象了,但是some现在在内存中,还没加载到窗体
当把动态创建的节点添加到窗体前,不能通过$("#d1")访问到它
必须先把some追加到窗体
$("div:first").append(some);
才可以通过$("#d1") 中找到它
append 把link元素追加到哪$("div:first").append(link);
appendTo link.appendTo("div:first")
在结束标签之前添加元素 加子节点
直接把元素移动过去,并且包含所有事件
prepend
prependTo
在开始标签之后添加元素 加子节点
after
afterTo
在结束标签外添加元素 加兄弟节点
before
beforeTo
在开始标签前添加元素 加兄弟节点
13、删除节点
remove() 删除当前节点
empty() 清空当前节点之间的内容,节点保留
14、*替换节点
$(“br”).replaceWith(“
”);
15、*包裹节点
wrap()将所有元素逐个用指定标签包裹
16、绑定事件
绑定事件 $("#id").bind("click",function(){})
解除绑定 $("#id").unbind("click",function(){})
让事件只执行一次 $("#id").one("click",function(){})
合成事件hover toggle
hover(enterfn,leavefn) 当鼠标放上时执行enterfn,当鼠标离开时执行leavefn 封装mouseover,mouseout
toggle(fn1,fn2) 当鼠标第一次点击时执行fn1,第二次点击执行fn2,以后依次执行 封装click
17、事件冒泡
mouseover、mouseenter mouseover会事件冒泡,mouseenter不会
mouseout、mouseleavemouseleave会阻止事件冒泡
阻止事件冒泡
$("#d1").click(function(e){ e.stopPropagation();})
18、*事件参数
pageX、pageY
target 获得触发事件的元素(事件冒泡的起始) 相当于event.srcElement
altKey、shiftKey、ctrlKey
当键盘按下 keyCode 键盘码、which ascii码
当鼠标按下的时候which可以获取鼠标左右键(1,3)
19、动画
show()、hide()
toggle() 切换显示隐藏
slideDown、slideUp、 fadeOut、fadeIn
animate 复杂动画
网页标题:JQuery入门总结(二)【选择器、方法应用】
网页URL:http://azwzsj.com/article/jeggeg.html