jQuery

Posted 2022-07-11 anlin981121

jQuery

案例1：重写弹出广告

知识讲解-jQuery(一)

　　基本效果：（放大缩小滑动）

属性名	属性说明
show(speed,fn);	显示元素
hide(speed,fn);	隐藏元素
toggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

滑动效果：（上下滑动）

属性名	属性说明
slideDown(speed,fn);	显示元素
slideUp(speed,fn);	隐藏元素
slideToggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

淡入淡出效果：（改变透明度的效果）

属性名	属性说明
fadeIn(speed,fn);	显示元素
fadeOut(speed,fn);	隐藏元素
fadeToggle(speed,fn);	1、使得显示元素隐藏 2、使得隐藏元素显示

案例代码实现

知识讲解-jQuery（二）

和CSS层级选择器类似，可以通过层级关系获取对应标签对象。

 

 A B    获得A元素内部的所有的B元素。 （子子孙孙）

 A>B   获得A元素下面的所有B子元素。  儿子

 A+B   获得A元素同级下一个B元素    下面的第一个兄弟

 A~B   获得A元素之后的所有B元素 所有的弟弟

属性选择器

我们可以通过属性选择器，以属性名或者值来匹配对应标签

  [属性名] 获得有 指定属性名 的标签对象。

 [属性名=值]  获得 指定属性名等于指定值 的标签对象     value = man

 [属性名*=值]  获得 指定属性名 含有 指定值 的标签对象    value *= a

 

多个属性选择器可以组合使用

l [选择器1][选择器2][选择器3]

基本过滤选择器

通常我们在获取到一系列标签对象之后，会有一些筛选需求，

这里就可以使用基本过滤选择器。

 

 :first 第一个

 :last 最后一个

 :even 偶数，索引从 0 开始计数  

 :odd 奇数

 :not(..) 除了指定内容    1234 : not(12)   == >  34

 :eq(index) 获取指定索引的元素

 :gt(index) 大于index索引的元素

 :lt(index) 小于index索引的元素

表单属性选择器

 :checked 选中

 :selected 选择

 :enabled 可用

 :disabled 不可用。

2、案例2：重写隔行换色

2.1、需求说明

开发中，需要使用表格陈列数据，数据过多不易查看，通常使用隔行换色进行表示。

 

2.2、知识讲解-jQuery（三）

2.2.1、jQuery操作class属性

  addClass(“值”)  给元素对象追加样式

  removeClass()   将元素对象的class删除

2.3、需求分析

2.4、案例代码实现

3、案例3：重写全选全不选、反选

3.1、需求说明及分析

3.2、知识讲解-jQuery(四)

lprop("属性名");     获取某个属性名对应的值             attr(“属性名”)

 prop("属性名",属性值);    将其属性名设置为某个属性值    attr("属性名",属性值);

 removeProp("属性名");    移除改属性     removeAttr(“属性名”);

3.3、案例代码准备及实现

3.4、扩展-反选实现（一）

$(".itemSelect")  返回类型是数组

设置值：可以一次性将数组中的元素设置为相同的值(数组内部经过了遍历)

获取值：仅可以将下标为0的元素的属性值获取到

3.5、反选实现（二）

数组遍历：

在JS中，我们使用普通FOR循环即可遍历数组。

在JQuery中，我们可以使数组的遍历变得更为简单

 

属性名	属性说明
JQ数组.each(fn);	遍历JQ数组
$.each(JQ数组,fn);	遍历JQ数组

 

 

反选实现2：

4：案例4：重写省市联动

4.1、需求说明及分析

4.2、知识讲解-jQuery(五)

4.2.1、元素value属性操作

属性名	属性说明
JQ对象.val();	获取value属性的值   相当于Jq对象.prop(“value”);
JQ对象.val(值);	设置value属性的值   相当于Jq对象.prop(“value”,”值”)

 

4.2.2、获取/设置元素内容体

1、获取/设置元素内容体html代码

JQ对象.html()	获得内容体html代码     相当于 js 中   js对象.innerHTML
JQ对象.html("HTML代码")	设置html代码   相当于js中   js对象.innerHTML = “”

 2、获取/设置元素内容体纯文本

属性名	属性说明
JQ对象.text()	获得文本，如果有标签，忽略。
JQ对象.text("纯文本")	设置文本，如果含有HTML标签，不进行解析。原样输出。

4.2.3、追加元素内容体

 

通常我们涉及到追加内容体，使得效果可以层层叠加。

 

以下两句效果相同，写法不同

A.append(B) , 向A的末尾追加B  

 B.appendTo(A) ，将B追加到A的末尾

 

以下两句效果相同，写法不同

 A.prepend(B) , 向A的头部追加B     

 B.prependTo(A) ，将B追加到A的头部

 

 4.3、案例准备及代码实现

5、案例5：列表左右选择

5.1、需求说明及分析

5.2、案例实现