jQuery
一、简介
1、什么是jQuery
JavaScript的框架，是一套工具库。简化了JavaScript的功能实现。可以使得开发者写更少的代码，却做更多的事-write less do more。
1. jquery是一个javascript的框架，是对javascript的进一步的封装
2. 在js中通过dom获取一个标签:
document.getElementById("d1")
在jquery中获取一个标签：
$("#d1")
上述的写法是jquery的一种语法，在底层实现上还是js
2、jQuery功能
jQuery库包含以下功能：
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
3、安装
有两个版本的 jQuery 可供下载：
- Production version - 用于实际的网站中，已被精简和压缩。 jquery-1.8.3.js
- Development version - 用于测试和开发（未压缩，是可读的代码） jquery-1.8.3.min.js
<head>
<script src="jquery-1.10.2.min.js"></script> <!--引用jquery库-->
</head>
4、初识jQuery
<head>
<title>初识jQuery</title>
<meta charset="utf-8">
<script src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
function myclick()
{
$("#pid").hide() //获取id为pid的标签，并将其隐藏
}
</script>
</head>
<body>
<p id="pid">做一个决定，并不难，难的是付诸行动，并且坚持到底。</p>
<input type="button" name="" value="点击" onclick="myclick()">
</body>
二、jQuery选择器
jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
jQuery 中所有选择器都以美元符号开头：$()。
1、基本选择器
1.1 元素选择器
$("p").hide(); // 所有的p标签都被隐藏
//jquery可以一次性操作单个或多个元素
1.2 #id选择器
$("#test"); //id值为test的标签
1.3 .class选择器
$(".test"); //类名为test的标签
1.4 *全选择器
$("*"); //所有的标签，全文档
1.5 多选择器共用
var p = $("p.pc") //p标签且类名为pc的标签
var p = $("p#pid") //p标签且id为pid的标签
var p = $("div p") //div标签下的p标签
var p = $("div,p") //多个标签同时获取，用逗号分隔
1.6 jQuery对象与DOM对象区别
DOM获取元素：
document.getElement...(xxx) //返回DOM对象
jQuery获取元素：
$("xxx") //返回jQuery对象
都是对一个或多个标签的封装，都指向一个或多个标签，只是支持的功能不一样，DOM对象和Jquery对象都有各自的方法
# jquery对象与js对象区别： 我对象说你真可爱 象不理我1. var p = $("#p1") 获取的是jquery对象2. var p = document.getElementById('p1') 获取的是dom对象如果是jquery对象，操作标签时，需要使用jquery的语法如果是dom对象，操作标签时，需要使用原生的js的写-dom写法
-
jQuery对象与DOM对象相互转换
-
DOM --> jQuery
var div = document.getElementById("div_1"); //DOM对象var div_jq = $(div) //jquery对象 -
jQuery --> DOM
var div_jq = $(div) //jquery对象var div = div.get(0) //DOM对象var div = div[0] //DOM对象
-
dom对象与jquery对象转换1. dom转jquery $(dom对象) -> jquery对象 2. jquery转dom jquery对象[下标] -> dom对象
#### 2、层级选择器
##### 2.1 后代选择器
$(“selector1 selector2”) 中间有空格
```js
$("div .a"); //选择所有的div，其中样式类为a的后代$("div .a input"); //选择所有的div，其中样式类为a的后代，再选择这些后代的input后代标签
```
##### 2.2 父子选择器
$(“selector1 > selector2”); 中间为大于号
```js
$("span > input"); //所有的span的input子标签$("div span>input"); //所有的div下的span的input子标签
```
##### 2.3 后续紧邻兄弟
$("selector1+selector2") 中间为加号
```js
$("div+p") ; //紧邻div的p标签$("div+p+input") //紧邻div的p标签紧邻的input标签
```
##### 2.4 后续所有兄弟
$("selector1~selector2") 中间为破折号
```js
$("div~p") ; //紧邻div后的所有p标签
```
#### 3、基本过滤选择器(了解***)
- **：first** 选出匹配到的标签中的第一个标签
```js
var p = $("div>b>p:first")p.hide() //将div下的b标签下的第一个p标签隐藏<div> <b > <p id="pid" class="a">1.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p> <p id="pid2">2.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p> </b></div>
```
- **：last** 选出匹配到的标签中的最后一个标签
```js
$("div>p:last") //div标签下的所有p标签中的第一个
```
- **：eq(index)** 选出对应index索引值的标签 index从0开始
```js
$("div>p:eq(1)") //div下的所有p标签中 索引值为1的标签
```
- **：gt(index)** 选出索引大于index的元素
```js
$("div>input:gt(1)"); //div下所有input子标签中索引大于1的
```
- **：lt(index)** 选出索引小于index的元素
```js
$("div>input:lt(1)");//div下所有input子标签中索引小于1的
```
- **：odd** 选出索引值为奇数的元素
```js
$("div>input:odd");//div下所有input子标签中索引为1,3,5..的
```
**：even** 选出索引值为偶数的元素
```js
$("div>input:odd");//div下所有input子标签中索引为2,4,6..的
```
- **：not(selector)** 选出selector不能匹配到的元素
```js
$("div>input:not(.a)"); //div下所有input子标签中样式类名不是a的 $("#abc>li:not(#a)"); //id为abc的标签下的li子标签中id不是a的$("#abc>li:not(:eq(2))");//id为abc的标签下的li子标签中索引不是2的
```
#### 4、内容过滤选择器（了解*）
- **：contains** 模糊匹配 (自己含有，或后代含有)
```js
$("div:contains('2')") div或div下内容包括2的标签
```
- **：empty** 没有内容的标签
```js
$("p:empty") //没有内容的p标签
```
- **：parent** 包含子元素或文本内容
```js
$("p:parent") //有文本内容或子标签的p标签
```
- **：has(selector)** 拥有某种后代的标签
```js
$("div:has('p')") //有p标签的div标签
```
#### 5、属性过滤选择器
- `$("[name]")` 有name属性的
- `$("[name='zhj']")` name属性值为zhj的
- `$("[value='male']")` value属性值为male的
- `$("[type='text']")` type属性值为text的
```js
$("div[name='abc']"); //div标签且name为abc
```
#### 6、可见性过滤选择器
- `:visible` 可见元素
- `:hidden` 隐藏元素
```html
<script type="text/javascript"> function myclick() { $("div p:empty").hide(); console.log($("div p:visible")); }</script><div> <p id="pid" class="a">1.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p> <p id="pid2">2.做一个决定，并不难，难的是付诸行动，并且坚持到底。</p> <p></p></div><input type="button" name="" value="点击" onclick="myclick()">
```
#### 7、表单选择器
- `:input ` 所有的input元素
- `:checked` 适用于单选按钮 和 复选框
- `:selected` 适用于下拉框
**jQuery对象遍历**
```js
var plist = $(":input");for(var i = 0; i<plist.size();i++){ var pd = plist.get(i); //DOM对象 var pq = plist.eq(i); //jquery对象 console.log($(pd).val()); console.log(pq.val());}
```
或者
```js
var ps = $("div p");ps.each(function(i){ //i为循环变量 0，1，2... console.log(this) //this为当前遍历到的每一个DOM对象});
```
### 三、jQuery事件
#### 1、事件注册的方式
- 基于标签：和之前JS中使用方式一致,Jquery未加干涉
- 基于编程：Jquery提供了全新的API
```js
$(document).ready(function(){ $("#btn_1").click(function(event){ console.log($(this).val()); //this为当前触发事件的标签的DOM对象 console.log(this.value); })})
```
**Ready事件**
等价于onload的作用，用于保证代码的执行在页面加载之后
```js
$(document).ready(function(){...});$(function(){...}) //简写
```
#### 2、jQuery事件函数
| 鼠标事件 | 键盘事件 | 表单事件 |
| ----------- | ---------- | -------- |
| click() | keypress() | submit() |
| dblclick() | keydown() | change() |
| mouseover() | keyup() | focus() |
| mousemove() | | blur() |
| mouseout() | | |
| toggle() | | |
| hover() | | |
```js
//toggle开关 示例$(function(){ $("#btn_1").toggle(function(){ console.log('abc') $("#pid").hide() }, function(){ $("#pid").show() })})
```
```js
//hover鼠标复合函数$(function(){ $("#div_1").hover(function(){ //mouseenter时触发 this.style.backgroundColor = 'blue'; }, function(){ //mouseout时触发 $(this).css({"background-color":"green"}); })})
```
### 四、jQuery DOM
jQuery 中非常重要的部分，就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。
#### 1、获取内容
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
```js
<script > $(function(){ $("#btn").click(function(){ var pe = $("div"); var text = pe.text(); //获得标签文本内容 console.log(text); var html = pe.html(); //获取标签内容（包括HTML标记） console.log(html); console.log($(this).val()); //表单value $(this).val("不要点我"); //修改value值 -- 通过参数 上同 })})</script><div> <p id="pid" class="a"> 1.做一个决定，并不难，难的是付诸行动，并且坚持到底。 </p></div><input type="button" value="点我" id="btn">
```
#### 2、获取属性
jQuery attr() 方法用于获取属性值。
- `attr("属性名")` 获取属性名
- `attr("属性名","属性值")` 设置属性值
- `attr({属性名1:属性值, 属性名2:属性值,...})` 一次设置多个属性值
- `removeAttr("属性名")` 删除标签的属性
- `prop` 和attr使用一致，作用一致；但prop在获取bool类型属性时(checked,selected)更友好
~~~markdown
1. attr获取checked属性时 返回的是checked和undefined2. prop获取的是true和false
~~~
```js
$(function(){ $(":input").click(function(){ var attr = $("a").attr("href"); //获取href属性值 console.log(attr); $("a").attr("href","http://www.baidu.com"); //修改href属性值 })})<a href="http://www.baizhiedu.com" style="text-decoration: none" target="_blank">百知教育</a><input type="button" value="点我">
```
#### 3、添加元素
- append() - 在被选元素最后一个位置插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
```js
<script >$(function(){ $("#btn").click(function(){ $("#div_1").append("<p>通过 jQuery，可以很容易地添加新元素/内容。</p>") })})</script><div id="div_1"> abc</div><input type="button" value="添加" id="btn">
```
#### 4、删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 清空元素内容
#### 5、jQuery CSS类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
通过添加class实现 当点击button时将div的文本颜色改为blue，字体改为120px。
```js
<!--样式表--><style type="text/css"> .blue{ color: blue; font-size: 120px; }</style><!--jquery代码--><script>$(function(){ $("#btn").click(function(){ $("#div_1").addClass("blue") })})</script><!--HTML--><div id="div_1"> 这是一个文本</div><input type="button" value="添加" id="btn">
```
#### 6、css( )方法
css() 方法设置或返回被选元素的一个或多个样式属性。
- `css("样式属性名")` 获取样式属性值
- `css("样式属性名"，"样式属性值")` 设置样式属性值
- `css({"样式属性名1":"样式属性值","样式属性名2":"样式属性值",..})` 设置多个样式属性值
```js
$("#div_1").css("color","blue"); //设置css样式属性值console.log($("#div_1").css("color")); //获取css样式属性值$("#div_1").css({"background-color":"blue","color":"white","font-size":"50px"}); //一次设置多个属性
```
**补充：**
使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
```js
$(document).ready(function(){ $("p").on("click",function(){ ... }); $("button").click(function(){ $("<p>This is a new paragraph.</p>").insertAfter("button"); });});
```
93
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
