学习日记:jQuery之what,why,where,how及应用 (上)一、jQuery总介

148 阅读 0 评论 98 点赞

我是靠谱客的博主大气流沙，这篇文章主要介绍学习日记:jQuery之what,why,where,how及应用 (上)一、jQuery总介，现在分享给大家，希望可以做个参考。

一、jQuery总介

1）什么是jQuery

jQuery是第三方开源组织基于JavaScript写的一款跨主流浏览器的实用库

2）为什么要使用jQuery

（1） jQuery开源免费，允许客户拓展其功能；
（2）跨主流浏览器；
（3）文档丰富，插件众多；
（4）写少代码，多做事情；
（5）能用jQuery操作html/css/xml/事件/动画/ajax.
……

3）在哪里使用jQuery

在web页面中，操作html、jsp、css

4）怎么使用jQuery

（1）在页面有中引用jQuery.js文件
（2）根据jQuery的帮助文档书写jQuery代码
（3）在写jQuery的时候，也允许写JavaScript代码

5）jQuery的应用

（1）导入jQuery.js文件
（2）根据jQuery的帮助文档书写jQuery
分类：

①：jQuery九大选择器
基本

复制代码

1
2
3
4
5
6
7
8
9
10
//根据ID查找元素
$("#userID");
//根据标签种类查找
$("div");
//根据类名查找
$(".myClass");
//查找所有
$("*");
//混合条件查找
$("div,#userID,.myClass");

层级

复制代码

1
2
3
4
5
6
7
8
//直接查找多层内的元素
$("select option");
//查找子元素
$("form > input");
//查找所有跟在 label 后面的 input 元素
$("label + input");
//查找所有跟lable同辈的input元素
$("label ~ input");

基本

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//查找第一个元素
$("li").first();
//查找最后一个元素
$("li").last();
//查找索引值为单的元素（索引值从0开始算）
$("li:odd");
//查找索引值为双的元素（索引值从0开始算）
$("li:even");
//查找不为checked的input元素
$("input:not(:checked)")
//查找索引值为（1）的元素
$("li:eq(1)");
//查找索引值大于（1）的元素
$("li:gt(1)");
//查找索引值小于（1）的元素
$("li:lt(1)");
//查找所有的标题行 比如h1,h2....
$(":header").css("background", "#EEE");

内容

复制代码

1
2
3
4
5
6
7
8
//<div>John</div>中是含有John的元素
$("div:contains('John')");
//元素中为空的元素<div></div>
$("div:empty");
//元素中是否含有指定子元素的元素
$("div:has(p)");
//元素中含有td的元素
$("td:parent");

可见性

复制代码

1
2
3
4
//不可见tr元素
$("tr:hidden");
//可见元素
$(tr:visible);

属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//查找含有某属性的元素
$("div[id]");
//查找含有指定属性的元素
$("div[id=divID]");
//查找含有不指定属性的元素
$("div[id！=divID]");
//查找id以div开头的的元素
$("div[id^=div]");
//查找id以ID结尾的元素
$("div[id$=ID]");
//查找id含有ID的元素
$("div[id*=ID]");
//查找含有多个指定属性的元素
$("div[id][name='user']")

子元素

复制代码

1
2
3
4
5
6
7
8
//选择ul的第二个li,索引从1开始,如果是eq的话索引从0开始
$("ul li:nth-chile(2)");
//选择ul的第一个li
$("ul li:first-child");
//选择ul的最后一个li
$("ul li:last-child");
//选择只有一个子节点的子元素
$("ul li:only-child");

表单

复制代码

1
2
3
4
5
//选择input节点包括textarea,select,button
$(":input");
//选择指定对象节点:button,image,submit,text,password,select,file,checkbox,reset,radio等
$(":button");
//

表单对象属性

复制代码

1
2
3
4
5
6
7
8
9
10
11
//选择可用的元素
$("text:enabled");
//选择不可用的元素
$("text:disabled");
//选择选中的元素
$("text:checked");
$("text:selected");
//选中未选中的元素
$("text:NOT(:checked)");
$("text:NOT(:selected)");