jquery简单使用方法
jQuery使用
1.jQuery是JS的工具,对原生JS的方法进行封装,提供更便捷,简易的方法
官网:http://jquery.com
中文API:http://jquery123.com
2.使用
1.先引入jquery文件,后使用jquery的语法
2.工厂函数-$()
用于获取元素,创建元素节点或转换对象类型
例:
根据选择器获取元素,返回jquery对象
$('h1') $('#d1') $('.c1') $('#d1 h1')
3.DOM操作
* 获取元素
jquery中只用选择器获取元素
1.基础选择器
$('h1') $('#d1') $('.c1') $('#d1 h1') $('ul,ol')
2.层级选择器
* 后代选择器
* 子代选择器
* 相邻兄弟选择器
$('h1+h2')
查找h1后面相邻的兄弟元素,要求必须满足选择器h2
* 通用兄弟选择器
$('h1~h2')
查找h1后面所有满足选择器h2的兄弟元素
3.过滤选择器
* 过滤选择器与伪类选择器相似,必须与基础选择器结合使用
1.查找第一个元素
:first
2.查找最后一个元素
:last
3.查找奇数下标对应的选择器
:odd
4.查找偶数下标对应的选择器
:even
5.查找制定下表对应的元素
:eq(index)
6.查找大于指定下标的元素
:gt(index)
7.查找小于指定下标的元素
:lt(index)
8.否定删选
:not(selector1,selector2)
匹配除了selector1,selector2之外剩下的元素
4.属性选择器
根据标签属性匹配元素
* 匹配包含指定属性的元素
[attrName]
* 匹配属性名=属性值的元素
[attrName=value]
* 匹配属性值以指定字符开头的元素
[attrName^=value]
* 匹配属性值以指定字符结尾的元素
[attrName$=value]
* 匹配包含指定字符的元素
[attrName*=value]
5.子元素过滤选择器
*匹配第一个子元素
:first-child
*匹配最后一个子元素
:last-child
*匹配第n个子元素
:nth-child(n)
* 获取元素内容
1.html("")
同原生的innerHTML属性,读取或设置标签内容,可以识别标签语法
2.text("")
同原生的innerText属性,读取或设置标签内容,不能识别标签语法
3.val("")
同原生的value属性,读取或设置表单控件的值
* 操作元素属性
1. attr('attrName','value')
设置或读取元素属性
2. prop('attrName','value')
设置或读取元素
* 操作元素样式
* 根据层级结构获取元素
* 元素创建, 添加和删除
* 操作元素属性
1. attr('attrName','value')
设置或读取元素属性
2. prop('attrName','value')
设置或读取元素,如果操作用于标记元素状态的属性(例:checked属性值)只能使用prop()方法
3. removeAttr('attrName')
移除指定的标签属性
* 操作元素样式
1. 为元素添加id或class属性,对应选择器的样式
2. 针对class属性可以取多个值的情况,提供专门操作类名的方法
addClass('className') 添加指定类名
removeClass('className') 移除指定类名
toggleClass('className') 借助用户行为动态修改类名,有则删除,无则添加
3. 操作行内样式
* css('attrName','value')
* css(JSON对象)
格式:
{
'attrname':'value',
'attrname':'value',
......
}
* 根据层次结构获取元素
1. 获取父元素
parent()
2. 获取祖先元素/满足选择器的祖先元素
parents()/parents('selector')
3. 获取子元素列表
children()/children('selector')
4. 获取指定的后代元素
find('selector')
5. 获取下一个兄弟元素,必须满足选择器,否则查找失败
next()/next('selector')
6. 获取上一个兄弟元素,必须满足选择器,否则查找失败
prev()/prev('selector')
7. 获取所有的兄弟元素
siblings()/Siblings('selector')
* 元素的创建,添加和移除
1.创建元素
$('老王
h1>')
2.添加元素
*作为子元素添加
将新创建的元素添加至父元素的末尾
$parent.append(elem);
将新创建的元素添加至父元素的末尾
$parent.prepend(elem);
*作为兄弟元素添加
在obj之前添加新元素
$obj.before(elem)
在obj之后添加新元素
$obj.after(elem)
3.移除元素
$obj.remove()
* 事件处理
1.窗口加载完毕
原生JS使用onload事件
jQuery使用ready()表示:
语法一:
$(document).ready(function(){
//文档加载完毕后执行
})
语法二:
$()ready(function(){})
语法三:
$(function(){
//文档加载完毕后执行
})
区别:
onload重复书写会造成覆盖问题,需要手动检测;
ready方法可以重复书写,不需要考虑覆盖问题.
2.绑定方式
1.使用on()绑定
例:
$('h1').on('click',function(){})
2.使用bind()绑定
例:
$('h1').bind('click',function(){})
3.将省略on前缀的时间名称作为方法名直接绑定
例:
$('h1').click(function(){})
3.this关键字
直接使用this关键字,表示原生的对象,需要转换为jquery对象才能使用jquery方法
4.事件对象的获取和使用同原生JS