#JQuery基础
1. Javascript类的实现方式
1. Object方式
* Objecet是所有类的父类，可以使用Object表示其他类
2. 函数方式
* 函数名作为类名，函数内部包含的属性和方法作为类成员
2. this的作用
* this表示当前作用域下的对象
* 不同作用域下this表示的对象不同
* 在函数中指向的是window
* 在方法中指向的是调用该方法的对象
3. 对象类型的判断
1. typeof函数
* 返回对象的具体类型
2. instanceof函数
* 判断对象是否是某种类型的实例
4. 在页面中引入jQuery
```
<script src="js/jquery-3.1.0.js" type="text/javascript"></script>
```
注意：一定要放在前面(可放在header中)
5. jQuery基础语法
1. $(document).ready()与window.onload类似，但也有区别
| |window.onload|$(document).ready()|
|---|---|---|
|执行时机|必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行|网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完|
|编写个数|同一页面不能编写多个|同一页面能编写多个|
|简化写法|无|$(function(){//执行代码}) ;|
6. jQuery语法结构
```$(selector).action() ;```
* 工厂函数$()：将DOM对象转化为jQuery对象
* 选择器 selector：获取需要操作的DOM 元素
* 方法action()：jQuery中提供的方法
示例：```$("#current").addClass("current"); ```
7. jQuery代码风格
1. “$”等同于“ jQuery ”
```
$(document).ready()=jQuery(document).ready()
$(function(){...})=jQuery (function(){...})
```
2. 操作连缀书写
```
$("h2").css("background-color","#CCFFFF").next().css("display","block");
```
3. DOM对象和jQuery对象
* DOM对象：直接使用JavaScript获取的节点对象
```
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
```
* jQuery对象：使用jQuery包装DOM对象 后产生的对象，它能够使用jQuery中的方法
```
$("#title").html( );
等同于
document.getElementById("title").innerHTML;
```
* 提示：DOM对象和jQuery对象分别拥有一套独立的方法，不能混用
4. 使用$()函数进行转化：$(DOM对象)
```
var txtName =document.getElementById("txtName"); //DOM对象
var $txtName =$(txtName); //jQuery对象
```
**注意：jQuery对象命名一般约定以$开头
5. jQuery对象转DOM对象
* jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象
```
var $txtName =$ ("#txtName"); //jQuery对象
var txtName =$txtName[0]; //DOM对象
```
* 通过get(index)方法得到相应的DOM对象
```
var $txtName =$("#txtName"); //jQuery对象
var txtName =$txtName.get(0); //DOM对象
```
8. jQuery选择器
1. 基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
|名称|语法构成|描述|示例|
|---|:---:|:---:|---:|
|标签选择器|element|根据给定的标签名匹配元素|$("h2" )选取所有h2元素|
|类选择器|.class|根据给定的class匹配元素|$(" .title")选取所有class为title的元素|
|ID选择器|#id|根据给定的id匹配元素|$(" #title")选取id为title的元素|
|并集选择器|selector1,selector2,...,selectorN|将每一个选择器匹配的元素合并后一起返回|$("div,p,.title" )选取所有div、p和拥有class为title的元素|
|交集选择器|element.class或element#id|匹配指定class或id的某元素或元素集合|$("h2.title")选取所有拥有class为title的h2元素|
|全局选择器|*|匹配所有元素|$("*" )选取所有元素|
2. 层次选择器通过DOM 元素之间的层次关系来获取元素
|名称|语法构成|描述|示例|
|---|---|---|---|
|后代选择器|ancestor descendant|选取ancestor元素里的所有descendant（后代）元素|$("#menu span" )选取#menu下的\<span>元素|
|子选择器|parent>child|选取parent元素下的child（子）元素|$(" #menu>span" )选取#menu的子元素\<span>|
|相邻元素选择器|prev+next|选取紧邻prev元素之后的next元素|$(" h2+dl " )选取紧邻\<h2>元素之后的同辈元素\<dl>|
|同辈元素选择器|prev~sibings|选取prev元素之后的所有siblings元素|$(" h2~dl " )选取\<h2>元素之后所有的同辈元素\<dl>|
|属性选择器|[attribute]|选取包含给定属性的元素|$(" [href]" )选取含有href属性的元素|
|属性选择器|[attribute=value]|选取等于给定属性是某个特定值的元素|$(" [href ='#']" )选取href属性值为“#”的元素|
|属性选择器|[attribute !=value]|选取不等于给定属性是某个特定值的元素|$(" [href !='#']" )选取href属性值不为“#”的元素|
|属性选择器|[attribute^=value]|选取给定属性是以某些特定值开始的元素|$(" [href^='en']" )选取href属性值以en开头的元素|
|属性选择器|[attribute$=value]|选取给定属性是以某些特定值结尾的元素|$(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素|
|属性选择器|[attribute*=value]|选取给定属性是以包含某些值的元素|$(" [href* ='txt']" )选取href属性值中含有txt的元素|
|属性选择器|[selector] [selector2] [selectorN]|选取满足多个条件的复合属性的元素|$("li[id][title=新闻要点]" )选取含有id属性和title属性为新闻要点的\<li>元素|
3. 过滤选择器通过特定的过滤规则来筛选元素
* 语法特点是使用“:”，如使用$(“li:first”)来选取第一个li元素
* 基本过滤选择器、可见性过滤选择器、内容过滤选择器、子元素过滤选择器……
* 基本过滤选择器可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素
|名称|语法构成|描述|示例|
|---|---|---|---|
|基本过滤选择器|:first|选取第一个元素|$(" li:first" )选取所有\<li>元素中的第一个\<li>元素|
|基本过滤选择器|:last|选取最后一个元素|$(" li:last" )选取所有<li>元素中的最后一个\<li>元素|
|基本过滤选择器|:even|选取索引是偶数的所有元素(index从0开始)|$(" li:even" )选取索引是偶数的所有\<li>元素|
|基本过滤选择器|:odd|选取索引是奇数的所有元素（index从0开始）|$(" li:odd" )选取索引是奇数的所有\<li>元素|
|基本过滤选择器|:eq(index)|选取索引等于index的元素（index从0开始）|$("li:eq(1)" )选取索引等于1的\<li>元素|
|基本过滤选择器|:gt(index)|选取索引大于index的元素（index从0开始）|$(" li:gt(1)" )选取索引大于1的\<li>元素（注：大于1，不包括1）|
|基本过滤选择器|:lt(index)|选取索引小于index的元素（index从0开始）|$(“li:lt(1)” )选取索引小于1的\<li>元素（注：小于1，不包括1）|
|基本过滤选择器|:not(selector)|选取去除所有与给定选择器匹配的元素|$(" li:not(.three)" )选取class不是three的元素|
|基本过滤选择器|:header|选取所有标题元素，如h1~h6|$(":header" )选取网页中所有标题元素|
|基本过滤选择器|:focus|选取当前获取焦点的元素|$(":focus" )选取当前获取焦点的元素|
* 可见性过滤选择器可以通过元素显示状态来选取元素
|名称|语法构成|描述|示例|
|---|---|---|---|
|可见性过滤选择器|:visible|选取所有可见的元素|$(":visible" )选取所有可见的元素|
|可见性过滤选择器|:hidden|选取所有隐藏的元素|$(":hidden" ) 选取所有隐藏的元素|
* 示例 ```$(" p:hidden").show();```获取隐藏的<p>元素，使其显示
* 示例 ```$(" p:visible").hide();```获取显示的<p>元素，使其隐藏
9. jQuery的样式设置
1. 使用css()为指定的元素设置样式值
```css(name,value)```
示例：$(this).css("border","5px solid #f5f5f5");
2. 使用css()添加边框效果
3. 追加样式
```addClass(class)或addClass(class1 class2 … classN)```
4. 移除样式
```removeClass(“style2 ”)或removeClass("style1 style2 ")```
5. toggleClass()模拟了addClass()与removeClass()实现样式切换的过程
6. html()可以对HTML代码进行操作，类似于JS中的innerHTML
示例： $("div.left").html("<div class='content'>…</div>");
7. text()可以获取或设置元素的文本内容
8. html()和text() 的区别如下：
|语法|参数|功能|
|html()|无参数|用于获取第一个匹配元素的HTML内容或文本内容|
|html(content)|content参数为元素的HTML内容|用于设置所有匹配元素的HTML内容或文本内容|
|text()|无参数|用于获取所有匹配元素的文本内容|
|text (content)|content参数为元素的文本内容|用于设置所有匹配元素的文本内容|
9. val()可以获取或设置元素的value属性值
网友评论