jQuery基础之二
jQuery的中文文档十分详细,并且权威.
W3C的jQuery文档更加简单实用。
jQuery 1.9.0
jQuery操作DOM元素
元素本身
attr()
获得元素的某项属性,更改或添加元素的属性值
实例
var className= $("div").attr("class")
获得元素的类名
attr("property",‘value1‘) 更改一项属性
attr({property1: ‘value1‘,
property2: ‘value2‘ }) 更改多项属性
css()
为元素添加或修改某项或多项属性
var className= $("div").css("propertyName")
css("propertyname","value") 更改一项属性
$("div").css({"background":"red","width":"100px"}) 多项属性
注意:
多项属性时之间要用","隔开
且与attr()的不同,设置多个属性时其类名也加上引号
addClass()
为元素添加新类名,来改变样式
$("div").addClass("red")
为div元素添加样式
注意:
为元素添加新样式时不取消原有样式。
addClass()的中类名不再加"."
一次添加多项样式时之间要用" "空格隔开
removeClass()
反 addClass()
removeAttr()
反 css(),无需加属性值
clone()
复制元素整体
$(selector).clone()
实例
var a=$("#div1").clone()
将id为div1的元素赋值给变量a
包裹元素和内容
wrap()
用于包裹元素本身
$(selector).wrap(wrapper)
实例
$("#div1").wrap("<div></div>")
id为div1的元素整体被div标签包裹
wrapInner()
实例
$("#div1").wrapInner("<div id="div2"></div>")
id为div1的元素的所有子元素被div2包裹,而div2又被div1包裹
元素的子元素
append(content)
向指定的元素中追加内容,被追加的content参数,
可以是字符 HTML元素标记还可以是字符串的标记
默认在该元素的子元素的最后面
实例
js:
$html="<p class="green">asdawdasdwadsawdsa</p>"
$("div").append($html)
相当于在div元素内部又加入p标签
appendTo()
用法
$(content).appendTo(selector)
实例
js:
$html="<p class="green">asdawdasdwadsawdsa</p>"
$($html).appendTo("div")
将p标签加入到div标签的末尾处
remove()
删除所选元素本身和子元素
实例
<span class="green">asd</span>
<span class="red">asd</span>
js:
$("span").remove(".red")
删除span标签中类名为red的元素,此时该span标签不再存在
empty()
删除元素的所有子元素
实例
<span class="green">asd</span>
js:
$("span").empty()
知识删除了asd文本节点span标签依然存在
层级之内
before()和 after()
在元素的前后插入内容
$(selector).before(content)
$(selector).after(content)
替换内容
replaceWith() 和 replaceAll()
格式
$(selector).replaceWith(content)
$(content).replaceAll(selector)
实例
$("#div1").replaceWith("<p>asdwsadaw</p>")
把id为#div1的整个元素换为p标签
遍历元素
each()
格式:$(selector).each(function(index))
实例:
<span class="green1"></span>
<span class="green2"></span>
<span class="green3"></span>
<span class="green4"></span>
js:
$("span").each(function(){
if(index==2){
$(this).addClass("red")
}
}))
为类为 green4的span元素添加red样式
注意
this的使用$(this)此时不加双引号
jQuery事件与应用
jQuery并没有创建太多新的事件,而是为绑定事件时提供了方便。
注意:这里得事件名称没有‘on‘,绑定鼠标点击事件时只需click即可
新事件
ready事件
ready事件类似于onLoad事件,但前者只要页面的DOM结构
加载后便触发,而后者必须在页面全部元素加载成功才触发,
ready()可以写多个,按顺序执行。
注意:
$(document).ready(function(){})等价于$(function(){});
focus和blur事件
文本框的focus和blur事件
focus事件:当点击文本框时,触发该事件
blur事件:当文本框失去焦点时,触发该事件
change 事件
当一个元素的值(value)发生改变时,将触发该事件
实例:
当改变下拉列表框的opnion时,将触发该事件
绑定事件的方法
bind() 方法
通过bind()方法可以为获得的DOM对象绑定任意的事件
$(selector).bind(event,[data],function)
实例
$("#btntest").bind("click mouseout",function(){
$(this).attr("value","OK")
})
当鼠标点击id为btntest的按钮时改变其值为OK
注意:
事件要加引号
多个事件一起绑定时当中空格隔开
绑定事件新方法
one() 方法
$(selector).one(event,func)
可以绑定任何有效的事件,但该事件函数只会触发一次
hover() 方法
$(selector).hover(function1,function2)
当鼠标移到所选元素上时,执行的function1,鼠标移出时执行function2
toggle() 方法
$(seleector).toggle(func1,func2,func3,funcN)
当第一次点击元素对象时执行func1,第二次点击元素对象时执行func2..
当执行完最后一个函数时,再次点击将返回执行的第一个函数
卸载绑定事件方法
unbind() 方法
可以移除元素已经绑定的事件
$(selector).unbind(event[,fun])
注意:
若fun没有指定将移除所有的触发函数
模拟事件的触发
trigger() 方法
该方法可以直接触发元素指定的事件
$(selector).trigger(event)
实例
$("#form1 input:submit").trigger("click")
当执行该语句是相当于点击提交按钮,表单元素将被提交
精彩集锦
1.this指针的使用
$("span").each(function(){
if(index==2){$(this).addClass("red")}})
2.易错点睛
var speed=‘24px’ 或var speed=24
不可以 var speed=24px
相关标签:JavaScript
记录一下依稀记得的。来自《锋利的jQuery》第二章的总结
第一类:基本选择器(最常见的选择器)
①$("#id") ②$(".classname") ③ $("element") ④$("selector1,selector2,……,selectorN")
第二类:层次选择器
①$("ancestor descendant") 后代选择器 ② $("parent>child") 子代选择器
③$("prev+next") 紧接在prev后的next元素
④ $("prev~siblings") prev后的所有siblings元素
第三类:过滤选择器
①基本过滤选择器
②内容过滤选择器
③可见性过滤选择器
④属性过滤选择器
⑤子元素过滤选择器
⑥表单对象过滤选择器
Ps:私以为过滤选择器分类太细,应总结常用的几个过滤选择器,方便记忆。
第四类:表单选择器
$(":input")、$(":text")、$(":password")、$(":radio")、$(":image")
$(":checkbox")、$("submit")、$(":reset")、$(":button")、$(":file")
Ps:还是觉得表单选择器也挺细的,不知道常用的是哪几个
书中有段话:jQuery选择器的写法与CSS选择器的写法十分类似,只不过两者的作用效果不同,css选择器找到元素后是添加样式,而jQuery选择器找到样式后是添加行为。
作者: 慕粉1464062117
链接:http://www.imooc.com/article/16236
来源:慕课网