认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

（一）认识JQuery

 JQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一套定义好的方法

   JQuery的主旨：以更少的代码，实现更多的功能

（二）JQuery的优势

1）可以像CSS一样访问和操作DOM

2）修改CSS控制页面外观

3）简化JS代码操作

4）事件代理更加容易

5）动画效果使用方便

6） Ajax技术更加完美

7）大量的基于Jquery的插件

8）可以自定义扩展功能插件

（三）JQuery的语法

格式：$(selector).action()
美元符号$本身是Jquery对象的缩写
选择符selector查询和查找HTML元素
Action执行对元素的操作
实例：$("p").hide():隐藏P元素

这里提供一个JQuery的在线API:http://jquery.cuishifeng.cn/

（四）多库冲突

 解决多库冲突：jQuery.onConflict()方法放弃$符号,后面使用JQuery对象的时候就不能在使用$符号，而要使用JQuery

（五）原生JS对象和JQuery对象之间的转换

JS对象--》JQuery对象：

var p=document.getElementById('p');

$(p);//转换成JQuery对象了

JQuery对象--》JS对象：

$(p).get(0)或者$(p)[0]//这样就得到JS原生对象了

（六）DOM操作

1）设置元素以及内容：
方法名 描述
html()获取元素中的HTML内容
html(value) 设置元素中HTML内容
text()获取元素中文本内容
text(value)  设置元素中文本内容
val()获取表单元素中的文本内容
val(value)获取表单元素中的文本内容
 2）操作元素属性 //说明：这是对标签元素属性的操作，不是CSS样式表中的属性
attr(key) 获取元素key属性的属性值
attr(key,value) 设置元素key属性的属性值
attr({key1:value1,key2:value2}) 设置元素多个key属性的属性值，方法的参数就是一个Object对象
attr(key,function(index,value){})设置元素key通过fn来设置

3）操作CSS样式

方法名 描述
css({name1:value1,name2:value2})   设置元素多个CSS样式
addClass(class)   给每个元素添加一个CSS类
addClass(class1 class2 class3)给元素增加多个CSS类
remove(class)删除元素的一个CSS类
removeClass(class1 class2 class3)删除元素的多个CSS类
toggleClass(class)来回切换默认样式和指定样式