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

Posted 2020-09-15 真亦假

（一）认识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) 　　　　　　　　　　　　　　 来回切换默认样式和指定样式