jquery的常用方法详讲jq
选择器
1.基本选择器
1.标签选择器(元素选择器)
*语法: $(“html标签名”) 获得所有匹配标签名称的元素
2. id选择器
*语法: $("#id的属性值") 获得与指定id属性值匹配的元素
3.类选择器
*语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
4.并集选择器:
语法: $(“选择器1 ,选择器2…”)获取多个选择器选中的所有元素
2.层级选择器
1.后代选择器
*语法: $("A B ")选择A元素内部的所有B元素
2.子选择器
*语法: $(“A > B”) 选择A元素内部的所有B子元素
3.属性选择器
1.属性名称选择器
*语法: $(“A[属性名]”)包含指定属性的选择器
2.属性选择器
*语法: $(“A[属性名=‘值’]”)包含指定属性等于指定值的选择器
3.复合属性选择器
*语法: $(“A[属性名=‘值’][]…”)包含多个属性条件的选择器
4.过滤选择器
1.首元秦选择器
*语法: :first 获得选择的元素中的第一 个元素
2.尾元素选择器
“ 语法: :last 获得选择的元素中的最后一 个元秦
3.非元秦选择器
语法: :not(selector) 不包括指定内容的元素
4.偶数选择器
语法::even偶数,从0开始计数
5.奇数选择器.
语法::odd奇数,从0开始计数
I
6.等于索引选择器
*语法: :eq(index) 指定索引元素
7.大于索引选择器
*语法: :gt(index) 大于指定索引元素
8.小于索引选择器
*语法: :lt(index) 小于指定索引元素
5.表单过滤选择器:
1.可用元素选择器
*
语法: :enabled 获得可用元素
2.不可用元素选择器.
*
语法: :disabled 获得不可用元素
3.选中选择器
*语法: :checked 获得单选/复选框选中的元素
4.选中选择器.
语法: :selected 获得下拉框选中的元素
DOM操作
- DOM操作
1.内容操作 - html(): 获取/设置元素的标签体内容
内容 --> 内容</ font> - text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
- val() :获取/ 设置元素的value属性值
2.属性操作
1.通用属性操作 - attr(): 获取/设置元素的属性
- removeAttr() :删除属性
3、prop() :获取/设置元素的属性 - removeProp(): 删除属性
attr和prop区别?
1.如果操作的是元素的固有属性,则建议使用prop
2.如果操作的是元素自定义的属性,则建议使用attr
2.对class属性操作 - addClass():添加class属性值
- removeClass(): 删除class属性值
- toggleClass() :切换class属性
Eg
//获取北京节点的name属性值
var name = $( “#bj”).attr(“name”);
//alert(name);
//设置北京节点的name属性的值为dabeijing
$( “#bj”).attr(“name”, “dabeijing”);
//新增北京节点的discription属性属性值是didu
$("#bj"). attr( “discription”, “didu”);
/ /删除北京节点的name属性并检验name属性是否存在
$( “#bj”). removeAttr( “name”);
/ /获得hobby的的选中状态
var checked = $("#hobby" ) . prop( “checked”);| I
alert(checked);
attr和prop区别?
1.如果操作的是元素的固有属性,则建议使用prop
2.如果操作的是元素自定义的属性,则建议使用attr
2.对class属性操作
- addclass(): 添加class属性值
- removeClass() :删除class属性值
- togleClass():切换class属性
- toggleClass(“one”):
*判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象 上不存在class=“one”,则添加
- css():
3. CRUD操作:
- DOM操作
1.内容操作 - html(): 获取/设置元素的标签体内容
内容 --> 内容</ font> - text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
- val() :获取/ 设置元素的value属性值
2.属性操作
1.通用属性操作 - attr(): 获取/设置元素的属性
- removeAttr() :删除属性
3、prop() :获取/设置元素的属性 - removeProp(): 删除属性
attr和prop区别?
1.如果操作的是元素的固有属性,则建议使用prop
2.如果操作的是元素自定义的属性,则建议使用attr
2.对class属性操作 - addClass():添加class属性值
- removeClass(): 删除class属性值
- toggleClass() :切换class属性
Eg
//获取北京节点的name属性值
var name = $( “#bj”).attr(“name”);
//alert(name);
//设置北京节点的name属性的值为dabeijing
$( “#bj”).attr(“name”, “dabeijing”);
//新增北京节点的discription属性属性值是didu
$("#bj"). attr( “discription”, “didu”);
/ /删除北京节点的name属性并检验name属性是否存在
$( “#bj”). removeAttr( “name”);
/ /获得hobby的的选中状态
var checked = $("#hobby" ) . prop( “checked”);| I
alert(checked);
attr和prop区别?
1.如果操作的是元素的固有属性,则建议使用prop
2.如果操作的是元素自定义的属性,则建议使用attr
2.对class属性操作
- addclass(): 添加class属性值
- removeClass() :删除class属性值
- togleClass():切换class属性
- toggleClass(“one”):
*判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象 上不存在class=“one”,则添加
- css():
3. CRUD操作:
- apperpd():父元素将子元秦追加到末尾
*对象1.append(对象2):将对象2添加到对象1元素内部,并且在末尾 - prepend():父元素将 子元素追加到开头
对象1. prepend(对象2) :将对象2添加到对象1元素内部,并且在开头 - appendTo():
对象1. appendTo(对象2) :将对象1添加到对象2内部,并且在末尾 - prependTo() :
对象1. prependTo(对象2) :将对象1添加到对象2内部,并且在开头 - after() :添加元素到元素后边
对象1. after(对象2) :将对象2添加到对象1后边。 对象1和对象2是兄弟关系 - before() :添加元素到元秦前边
对象1. before(对象2) :将对象2添加到对象1前边。对象1和对象2是兄弟关系 - remove() :移除元素
*对象.renmfove() :将对象删除掉 - empty() :清空元素的所有后代元素。
‘对象. empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
1。动由
1.三种方式显示和隐藏元素
1.默认显示和隐藏方式
- show([speed, [easing],[fn]])
1.参数∶
*linear:动画执行时速度是匀速的 - fn:在动画完成时拱行的函数,每个元素执行一次。
- hide([speed,[easing],[fn]])
- toggle([speed],[easing],[fn])
2.滑动显示和隐藏方式 - slideDown([speed],[easing].[fn])
- slideup([speed,[easing],[fn]])
- slideToggle([speed],[easing].[fn])
3.淡入淡出显示和隐藏方式 - fadeIn([speed],[easing],[fn])
- fadeout([speed],[easing],[fn])
- fadeToggle([speed,[easing],[fn]])
- speed :动画的速度。三个预定义的值(“slow” , “normal”, “fast”)或表示动画时长的毫秒数值(如∶1000)
- easing:用来指定切换效果,默认是"swing",可用参数"linear"
*swing:动由执行时效果是先慢,中间快,最后又慢
遍历
$(function () {
//1.获取所有的u1下的li
var citys = $("#city 1i");
//2.遍历li
for (var i = 0; i < citys.1ength; i++) {
//获取内容
alert(i+":"+citys[i]. innerHTML);
});
//2. jq对象. each(callback)
citys. each(function (index,element) {
//3.1获取1i对象第一-种方式this
//alert(this. innerHTML);
//3.2 获取1i对象第二种方式在回调函数中定义参数
index (索引) element (元素对象)
//alert(index+":"+element . innerHTML);
});
//2. jq对象. each(callback)
citys. each(function (index,element) {
hr //3.1 获取1i对象第一种方式this
//alert(this. innerHTML) ;
//alert(
(
t
h
i
s
)
.
h
t
m
l
(
)
)
;
/
/
3.2
获
取
1
i
对
象
第
二
种
方
式
在
回
调
函
数
中
定
义
参
数
i
n
d
e
x
(
索
引
)
e
l
e
m
e
n
t
(
元
素
对
象
)
/
/
a
l
e
r
t
(
i
n
d
e
x
+
"
:
"
+
e
l
e
m
e
n
t
.
i
n
n
e
r
H
T
M
L
)
;
/
/
a
l
e
r
t
(
i
n
d
e
x
+
"
:
"
+
(this) .html()); //3.2获取1i对象第二种方式在回调函数中定义参数index (索引) element (元素对象) //alert(index+" :"+element . innerHTML); //alert(index+":"+
(this).html());//3.2获取1i对象第二种方式在回调函数中定义参数index(索引)element(元素对象)//alert(index+":"+element.innerHTML);//alert(index+":"+(element) . html());
//判断如果是上海,则结束循环
if(“上海” ==
(
e
l
e
m
e
n
t
)
.
h
t
m
l
(
)
)
/
/
如
果
当
前
f
u
n
c
t
i
o
n
返
回
为
f
a
l
s
e
,
则
结
束
循
环
(
b
r
e
a
k
)
。
/
/
如
果
返
回
为
t
r
u
e
,
则
结
束
本
次
循
环
,
继
续
下
次
循
环
(
c
o
n
t
i
n
u
e
)
r
e
t
u
r
n
t
r
u
e
;
a
l
e
r
t
(
i
n
d
e
x
+
"
:
"
+
(element) .html()){ //如果当前function返回为false,则结束循环(break)。 //如果返回为true,则结束本次循环,继续下次循环( continue) return true; } alert(index+":"+
(element).html())//如果当前function返回为false,则结束循环(break)。//如果返回为true,则结束本次循环,继续下次循环(continue)returntrue;alert(index+":"+(element) .html());
});
//3 $.each(object, [callback])
KaTeX parse error: Expected '}', got 'EOF' at end of input: …on ( ) { alert((this).html());
});
3.事件绑定
3.事件绑定
- jquery 标准的绑定方式
jq对象.事件方法(回调函数) ;
*注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
*表单对象. submit();//让表单提交 - on绑定事件/off解除绑定
jq对象. on(“事件名称” ,回调函数)
jq对象.off(“事件名称” )
3.事件切换: toggle
jq对象. toggle(fn1,fn2…)
1/给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
$( “#name” ). mouseover(function () {
alert(“鼠标来了…”)
});
$("#name"). mouseout (function () {
alert(“鼠标了…”)
});
zdatthxmxyelbcgg
vswbvigwebctbgab
- on绑定事件/off解除绑定
- jq对象. on(“事件名称” ,回调函数)
jq对象.off(“事件名称”)
*如果off方法不传递任何参数,则将组件上的所有事件全部解绑
3.事件切换: toggle - jq对象. toggle(fn1,fn2…)
*当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.
*注意: 1.9版本.toggle() 方法删除, jQuery Migrate (迁移)插件可以恢复此功能。
5.插件:增强JQuery的功能
1.实现方式:
- . f n . e x t e n d ( o b j e c t ) 增 强 通 过 J q u e r y 获 取 的 对 象 的 功 能 . fn. extend(object) 增强通过Jquery获取的对象的功能 .fn.extend(object)增强通过Jquery获取的对象的功能("#id")
- . e x t e n d ( o b j e c t ) 增 强 J Q e u r y 对 象 自 身 的 功 能 .extend(object) 增强JQeury对象自身的功能 .extend(object)增强JQeury对象自身的功能/ jQuery