jquery快速使用（jquery最常用方法）

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操作

5. DOM操作
   1.内容操作
6. html(): 获取/设置元素的标签体内容
   内容 --> 内容</ font>
7. text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
8. val() :获取/ 设置元素的value属性值
   2.属性操作
   1.通用属性操作
9. attr(): 获取/设置元素的属性
10. removeAttr() :删除属性
    3、prop() :获取/设置元素的属性
11. removeProp(): 删除属性
    attr和prop区别?
    1.如果操作的是元素的固有属性，则建议使用prop
    2.如果操作的是元素自定义的属性，则建议使用attr
    2.对class属性操作
12. addClass():添加class属性值
13. removeClass(): 删除class属性值
14. 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属性操作

1. addclass(): 添加class属性值
2. removeClass() :删除class属性值
3. togleClass():切换class属性

• toggleClass(“one”):
  *判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象 上不存在class=“one”,则添加

4. css():

3. CRUD操作:

5. DOM操作
   1.内容操作
6. html(): 获取/设置元素的标签体内容
   内容 --> 内容</ font>
7. text(): 获取/设置元素的标签体纯文本内容内容 --> 内容
8. val() :获取/ 设置元素的value属性值
   2.属性操作
   1.通用属性操作
9. attr(): 获取/设置元素的属性
10. removeAttr() :删除属性
    3、prop() :获取/设置元素的属性
11. removeProp(): 删除属性
    attr和prop区别?
    1.如果操作的是元素的固有属性，则建议使用prop
    2.如果操作的是元素自定义的属性，则建议使用attr
    2.对class属性操作
12. addClass():添加class属性值
13. removeClass(): 删除class属性值
14. 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属性操作

1. addclass(): 添加class属性值
2. removeClass() :删除class属性值
3. togleClass():切换class属性

• toggleClass(“one”):
  *判断如果元素对象上存在class=“one”,则将属性值one删除掉。如果元素对象 上不存在class=“one”,则添加

4. css():

3. CRUD操作:

1. apperpd():父元素将子元秦追加到末尾
   *对象1.append(对象2):将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将 子元素追加到开头
   对象1. prepend(对象2) :将对象2添加到对象1元素内部，并且在开头
3. appendTo():
   对象1. appendTo(对象2) :将对象1添加到对象2内部，并且在末尾
4. prependTo() :
   对象1. prependTo(对象2) :将对象1添加到对象2内部，并且在开头
5. after() :添加元素到元素后边
   对象1. after(对象2) :将对象2添加到对象1后边。 对象1和对象2是兄弟关系
6. before() :添加元素到元秦前边
   对象1. before(对象2) :将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. remove() :移除元素
   *对象.renmfove() :将对象删除掉
8. empty() :清空元素的所有后代元素。
   ‘对象. empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点

1。动由
1.三种方式显示和隐藏元素
1.默认显示和隐藏方式

1. show([speed, [easing],[fn]])
   1.参数∶
   *linear:动画执行时速度是匀速的
2. fn:在动画完成时拱行的函数，每个元素执行一次。
3. hide([speed,[easing],[fn]])
4. toggle([speed],[easing],[fn])
   2．滑动显示和隐藏方式
5. slideDown([speed],[easing].[fn])
6. slideup([speed,[easing],[fn]])
7. slideToggle([speed],[easing].[fn])
   3．淡入淡出显示和隐藏方式
8. fadeIn([speed],[easing],[fn])
9. fadeout([speed],[easing],[fn])
10. fadeToggle([speed,[easing],[fn]])
11. speed :动画的速度。三个预定义的值(“slow” , “normal”, “fast”)或表示动画时长的毫秒数值(如∶1000)
12. 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($(this).html());//3.2获取1i对象第二种方式在回调函数中定义参数index(索引)element(元素对象)//alert(index+":"+element.innerHTML);//alert(index+":"+$(element) . html());
//判断如果是上海，则结束循环
if(“上海” == $(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.事件绑定

1. jquery 标准的绑定方式
   jq对象.事件方法(回调函数) ;
   *注:如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
   *表单对象. submit();//让表单提交
2. on绑定事件/off解除绑定
   jq对象. on(“事件名称” ,回调函数)
   jq对象.off(“事件名称” )
   3.事件切换: toggle
   jq对象. toggle(fn1,fn2…)

1/给name绑定鼠标移动到元素之上事件。绑定鼠标移出事件
$( “#name” ). mouseover(function () {
alert(“鼠标来了…”)
});
$("#name"). mouseout (function () {
alert(“鼠标了…”)
});
zdatthxmxyelbcgg
vswbvigwebctbgab

2. on绑定事件/off解除绑定

• jq对象. on(“事件名称” ,回调函数)
  jq对象.off(“事件名称”)
  *如果off方法不传递任何参数，则将组件上的所有事件全部解绑
  3.事件切换: toggle
• jq对象. toggle(fn1,fn2…)
  *当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.
  *注意: 1.9版本.toggle() 方法删除, jQuery Migrate (迁移)插件可以恢复此功能。

5.插件:增强JQuery的功能
1.实现方式:

1. $.fn.extend(object)增强通过Jquery获取的对象的功能$("#id")
2. $.extend(object)增强JQeury对象自身的功能$/ jQuery