jQuery的简单用法（jQuery的简介，选择器，属性和css,文档处理）

一、jQuery简介

1.1.  JS库

JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互客户端页面, 并且兼容各大浏览器。

1.2.  当前流行的 JavaScript 库有：

①　jQuery ，最流行

②　EXT JS，2.0开始收费

③　Prototype，对js扩展，框架开发。

④　Dojo

⑤　Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。基于jQuery 一个UI工具

⑥　VUE

⑦　Layui

⑧　easyui

1.3.  jQuery介绍

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，

还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。

1.4.  优点

1. 开源免费
2. 核心理念是write less,do more(写得更少,做得更多)
3. 轻量级    ：源码1.11.js大小是286kb，压缩1.11.min.js大小是94.1k。、
4. 兼容性好
5. jQuery的语法设计可以使开发者更加便捷
6. 例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能
7. jQuery能够使用户的html页面保持代码和html内容分离
8. 不用再在html里面插入一堆js来调用命令了，只需要定义id即可
9. 文档说明很全

1.5.  使用jquery的步骤

Step1:把jquery库引入工程中

Step2：<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>

Step3:使用jquery

1.6.  jQuery基本语法

jquery入口：注意：一个页面可以有多个，建议只写一个。

$(document).ready(function(){

//页面元素加载完毕执行

});

//  js

window.onload=function(){};

简写：

$(function(){

});

等价：

jQuery(function(){});

jQuery对象和dom对象转换

$(function(){

//jquery对象  约定变量名前加上$符号

var $divObj = $("#mydiv");

//把jquery对象转为dom对象

var divObj = $divObj.get(0);

//divObj.html('hhhh ');

divObj = $divObj[0];

//document.getElementById("mydiv");

divObj.innerHTML  ='hello';

//js中的dom对象  转成 jquery中的对象

var divObj2 = document.getElementById("mydiv");

//转化为jquery对象

var $divObj2 =  $(divObj2);

$divObj2.html("hehehheheheheeh");

});

二、选择器【重要】

2.1基本选择器【重要】   跟css中的选择器对应

#id ， id选择器，<xxx id=""> 通过id值获得元素

element，标签选择器，<xxx> 通过标签名获得元素

.class ，类选择器，<xxx class=""> 通过class值获得元素。注意：使用点开头

s1,s2,...  并集选择器，将多个选择器的结果添加一个数组中。

*               所有

2.2层级

A  B ，获得A元素内部所有的B后代元素。（爷孙）

A > B ，获得A元素内部所有的B子元素。（父子）

A + B ，获得A元素后第一个兄弟并且为B。（兄弟）

A ~ B ，获得A元素后面的所有的兄弟B。（兄弟）

2.3基本过滤

过滤选择器格式 “：关键字”

:first   , 第一个

:last    ,最后一个

:eq(index) ，获得指定索引

:gt(index) 大于

:lt(index) 小于

:even 偶数，从 0 开始计数。例如：查找表格的1、3、5...行（即索引值0、2、4...）

:odd 奇数

:not(selector) 去除所有与给定选择器匹配的元素

2.4.内容过滤

:empty  当前元素是否为空（是否有标签体--子元素、文本）

:has(...)  当前元素，是否含有指定的子元素

:parent    匹配含有子元素或者文本的元素

:contains( text ) 标签体是否含有指定的文本

2.5可见性过滤[掌握]

:hidden   隐藏。特指 <xxx style="display:none;">

:visible   可见（默认）

2.6属性【掌握】

[attribute]

[attribute=value]

[attribute!=value]

[attribute^=value]

[attribute$=value]

[attribute*=value]

[attrSel1][attrSel2][attrSelN]

[属性名]                                   获得指定的属性名的元素

[属性名=值]                             获得属性名 等于 指定值的 的元素【1】

[属性名!=值]                            获得属性名 不等于 指定值的 的元素

[as1][as2][as3]....                    复合选择器，多个条件同时成立

2.7子元素过滤

:nth-child(index)  ，获得第几个孩子，从1开始。

:first-child ， 获得第一个孩子

:last-child ， 获得最后孩子

:only-child ， 获得独生子

2.8表单过滤

:input  所有的表单元素。（<input> / <select> / <textarea> / <button>）

:text                                            文本框<input type="text">

:password                                  密码框<input type=" password ">

:radio                                          单选<input type="radio">

:checkbox                                   复选框<input type="checkbox">

:submit                                       提交按钮<input type="submit">

:image                                        图片按钮<input type="image" src="">

:reset                                          重置按钮<input type="reset">

:file                                             文件上传<input type="file">

:hidden                                       隐藏域<input type="hidden">  ,还可以获得<xxx style="display:none">

其他值：<br> <option>  ,存在浏览器兼容问题

:button                                        所有普通按钮。 <button >  或 <input type="button">

2.9表单对象属性过滤【掌握】

:enabled                                   可用

:disabled                                   不可用。<xxx disabled="disabled"> 或<xxx disabled="">  或  <xxx disabled>

:checked                                    选中（单选框radio、复选框 checkbox）

:selected                                    选择（下拉列表 select option）

三、属性和CSS

3.1.  属性【掌握】   操作标签的属性

attr(name)   获得指定属性名的值  val()  attr(“value”);

attr(key ,val ) 给一个指定属性名设置值

attr(prop ) 给多个属性名设置值。参数：prop  json数据

{k : v , k : v , .....}

{key:值,key2:值2}   json数据

removeAttr(name)  移除指定属性

3.2.  CSS类

addClass("my")  追加一个类

removeClass("my")  将指定类移除

toggleClass("my")  如果有my将移除，如果没有将添加。

3.3.  HTML代码/文本/值【掌握】

val()        获得value的值

val(text)  设置value的值

html()     获得html代码，含有标签

html(...)  设置html代码，如果有标签，将进行解析。

text() 获得文本值，将标签进行过滤

text(...) 设置文本值，如果有标签，将被转义  -->   <  &lt;   &  &amp;  >  &lt;    &nbsp;

3.4.  CSS

<xxx style="key:value; key:value; ">

css(name)  获得指定名称的css值

css(name ,value) 设置一对值

css(prop) 设置一组值   参数为json  赋多个样式

3.5.  位置

offset()      获得坐标 ， 返回JSON对象，{"top":200, "left" : 100}

offset(...)    设置坐标。例如：$(this).offset({"top":0 , "left" : 0})

scrollTop()  垂直滚动条 滚过的距离

scrollLeft()  水平滚动条 滚过的距离

3.6.  尺寸

height([...]) 获得 或 设置 高度

width([...])获得 或 设置 宽度

四、文档处理

4.1.  内部插入【掌握】

A.append(B)  将B插入到A的内部后面（之后的串联操作，操作A）

<A>

<C><C>

<B></B>

<A>

A.html(B);   <A><B></B></A>

A.prepend(B) 将B插入到A的内部元素前面

<A>

<B></B>

<C></C>

<A>

4.2.  外部插入【掌握】

A.after(B)  , 将B插入到A后面（同级）

<A></A>

<B></B>

A.before(B) ，将B插入到A前面

4.3.  删除[掌握]

empty()  清空标签体

remove() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都会被移除

detach() 删除当前对象。如果之后再使用，元素本身保留，绑定事件 或 绑定数据 都保留

4.4.  复制

clone() 克隆

even ：指示事件处理函数是否会被复制。V1.5以上版本默认值是：false