jQuery: 是第三方开发的执行DOM操作的极简化的函数库
解决了大部分浏览器兼容性问题,凡是jQuery让用的几乎都没有兼容性问题
但是:
仅限于PC端!
仅是对DOM的每一步进行了简化,但是没有从根本上简化步骤。
1 使用:
(1)本地引入:<script src="js/jquery.minl.js"></script>
(2)CDN方式引入:如
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous">
</script>
2. jQuery的原理:
(1)引入jquery.js其实是向全局window中添加了一种新的类型: jQuery
① 构造函数:负责创建jQuery类型的子对象
内容其实就是:function jQuery(){ return new jQuery... }
如此一来,今后创建jQuery的子对象时,就不用再写new,而是直接写jQuery(),且jQuery做了进一步的简化:让$=jQuery,所以,调用$()等同于调 用jQuery().
具体$()做2件事:
1)创建一个jQuery的子对象;
2)去DOM树上查找要操作的元素,保存进jQuery子对象中;
② 原型对象:jQuery的原型对象jQuery.prototype负责保存所有jQuery类型的子对象共有的方法
所以:
(1)要用jQuery的简化版函数来操作DOM元素,都必须先创建jQuery的子对象,并且封装到jQuery对象中,才能使用jQuery的简化函数。
(2)但是调用jQuery家的简化版函数,底层会被自动翻译为原生的DOM函数或属性,作用于jQuery对象中封装的DOM元素身上。
(3)对jQuery子对象,调用简化版函数,就等效于从前对原生DOM元素调用原生的DOM函数和属性。
3.如何使用jQuery:
就像上面说的,jQuery操作DOM元素的步骤其实并没有简化,和DOM操作页面元素的步骤基本一样:
(1)查找触发事件的元素:
var $变量名=$("选择器")
(2)绑定事件处理函数:
$变量名.click(function(){ //获得this: this->当前点击的DOM元素对象,千万别看.前! //但是this指向的是DOM元素,无权使用jQuery家的函数 //所以,将来this-> var $变量=$(this); (3). 查找要修改的元素: 也可用$("选择器") (4). 修改元素: a. 修改元素的内容: $元素.html("新内容") })
4.jQuery简化版函数的特点:
(1)所有和修改相关的函数,都一个函数两用。如html(),text()都可以设置或者获取值,不写参数时就是获取值。
(2)几乎所有jQuery函数都内部自带for循环。
因为jQuery查找的结果是一个类型数组对象。对整个类数组对象调用一个jQuery简化版函数,其内部都自带for循环,会将效果自动应用到查找结果中 每个DOM元素上
如: