收藏

下载资源 加入VIP,免费下载

第1页 / 共19页

第2页 / 共19页

第3页 / 共19页

第4页 / 共19页

第5页 / 共19页

222

333

444

555

666

【JQ的层级选择器】

ØAncestordescendant2

ØParent>child

ØPrev+next

ØPrev~sibling

【JQ层级选择器的代码】

DOCTYPEhtml>

111

222

333

444

555

666

【JQ的基本过滤选择器】

$（function（）{

$（"#btn1"）.click（function（）{

$（"bodydiv:

first"）.css（"background","#bbffaa"）;

}）;

$（"#btn2"）.click（function（）{

$（"bodydiv:

last"）.css（"backgroundColor","#bbffaa"）;

}）;

$（"#btn3"）.click（function（）{

$（"bodydiv:

odd"）.css（"backgroundColor","#bbffaa"）;

}）;

$（"#btn4"）.click（function（）{

$（"bodydiv:

even"）.css（"backgroundColor","#bbffaa"）;

}）;

}）;

【JQ的属性选择器】

【JQ的表单选择器】

$（function（）{

$（"#btn1"）.click（function（）{

$（":

input"）.css（"background","#bbffaa"）;

}）;

$（"#btn2"）.click（function（）{

$（":

text"）.css（"background","#bbffaa"）;

}）;

}）;

使用JQuery完成表格的隔行换色

需求：

制作一个表格，隔行换色.第一行标题的行，不需要进行换色，其他的行需要变换颜色．

分析：

技术分析：

【JQuery的CSS类】

使用addClass（）,removeClass（）;添加或移除样式

步骤分析：

Ø步骤一：

在页面中引入一个jquery的js

Ø步骤二：

写页面加载的函数.

Ø步骤三：

使用选择器基本过滤找到奇数行和偶数行

Ø步骤四：

分别给不同的行添加样式（样式已经由美工制作好的）

代码实现：

使用JQuery完成复选框的全选和全不选

需求：

有如下的表格的数据，批量的进行删除.将上面的复选框选中，下面其他的复选框都被选中。

如果上面的复选框没有被选中，那么将下面的所有的复选框全不选.

分析：

技术分析：

【JQuery操作某个元素的属性】

步骤分析：

Ø步骤一：

引入jquery的js

Ø步骤二：

编写加载的方法.

Ø步骤三：

上面的复选框绑定一个单击事件

Ø步骤四：

如果上面的被选中，修改下面的所有的复选框的checked属性变为true否则将复选框的checked属性变为false.

代码实现：

$（function（）{

//步骤一：

为上面的复选框绑定单击事件:

$（"#selectAll"）.click（function（）{

/*if（this.checked==true）{

//如果上面的复选框被选中：

$（"input[name='ids']"）.attr（"checked",true）;

}else{

//上面的复选框没有被选中

$（"input[name='ids']"）.attr（"checked",false）;

}*/

//$（"input[name='ids']"）.attr（"checked",this.checked）;

$（"input[name='ids']"）.prop（"checked",this.checked）;//thisJS的对象

}）;

}）;

总结：

低版本可以使用attr方法设置属性的值.高版本中建议使用prop的方法设置属性的值.

使用JQuery完成省市联动

需求：

在注册的页面上有省市联动.

分析：

技术分析:

【JQuery的遍历】

each的方法进行遍历.

一种用法：

*JQ的对象.each（function（i,n）{

}）;

二种用法

*$.each（数组,function（i,n）{

}）;

【JQuery的DOM的操作】

JS中添加元素：

appendChild（）;

JQ中添加元素：

append（）;

appendTo（）;

步骤分析：

Ø步骤一：

引入jquery.js

Ø步骤二：

加载的方法.

Ø步骤三：

定义二维数组

Ø步骤四：

在第一个省份的下拉列表中绑定一个事件change

Ø步骤五：

在绑定的事件的函数中，获得选中的省份的值.

Ø步骤六：

遍历数组，省份的值与数组中的值比较.

Ø步骤七：

获得数组的值.遍历获得的值.

Ø步骤八：

获得每个值.创建元素，创建文本节点.

Ø步骤九：

将文本添加到option元素中.将option添加到第二个下拉列表中.

代码实现：

//定义二维数组：

varcities=[

["长春市","吉林市","延边市","白山市","松原市"],

["济南市","青岛市","临沂市","烟台市"],

["石家庄","唐山","保定","承德","秦皇岛"],

["南京","苏州","扬州","无锡"]

];

$（function（）{

//获得省份的下拉列表，绑定事件

$（"#province"）.change（function（）{

//获得下拉列表的值:

//alert（this.value）;

varval=this.value;

var$city=$（"#city"）;

$city[0].options.length=0;

$（cities）.each（function（i,n）{

//alert（i+""+n）;

if（val==i）{

$（n）.each（function（j,m）{

//alert（m）;

//创建option元素

varopEL=document.createElement（"option"）;

//创建文本节点

vartextNode=document.createTextNode（m）;

//将文本添加到option中

//opEL.appendChild（textNode）;

$（opEL）.append（textNode）;

//将option添加到第二个列表中

$city.append（opEL）;

}）;

}

}）;

}）;

}）;

总结

【JQuery的文档操作】

$（“a”）.append（“b”）;//将b添加到a元素中.

$（“a”）.appendTo（“b”）;//将a添加到b元素中.

$（“a”）.insertBefore（“b”）;//将a元素插入到b元素之前

$（“a”）.insertAfter（“b”）;//将a元素插入到b元素之后

$（“a”）.remove（）;//将a元素移除

使用JQuery完成下拉列表的左右选择：

需求：

在数据的编辑的页面中，有已选的商品和未有的商品两个下拉列表，可以左右进行选择

分析：

技术分析：

JQuery的选择器和文档操作.

步骤分析：

Ø步骤一：

引入jquery的文件

Ø步骤二：

页面加载的函数

Ø步骤三：

在链接上添加一个事件.

Ø步骤四：

使用选择器找到左侧的列表中被选中的元素，添加到右侧.

代码实现：