JQuery基础知识==认识JQuery

jQuery API 中文文档：https://www.jquery123.com/

jQuery Mobile 菜鸟教程：http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
更多：https://github.com/summerSongXia/summerSongXia.github.io/tree/master/JQuery

1. Javascript简介

　　1.1 JS的3个弊端：复杂的文档对象模型（DOM），不一致的浏览器实现和便捷的开发，调试工具的匮乏

　　1.2 为了简化JS的开发，一些JS程序库就诞生了，大部分的JS程序库都是封装了很多预定义的对象和实用函数，快捷开发并兼容各大浏览器

　　1.3 一些JS程序库：Prototype，Dojo，YUI，Ext JS，Moo Tools，JQuery库：轻量级，拥有强大的选择器，出色的DOM操作，可靠的事件处理，完善的兼容性，链式操作等功能

2. JQuery优势

　　2.1 轻量级：主要是采用UglifyJS压缩

　　2.2 强大的选择器：允许使用从CSS1到CSS3几乎所有的选择器，以及JQuery独创的高级而复杂的选择器，另外还允许加入插件支持XPath选择器

　　2.3 出色的DOM操作的封装

　　2.4 可靠的事件处理机制

　　2.5 完善的Ajax：JQuery将所有的Ajax操作封装到一个函数$.ajax()里面，可以是开发者专心处理业务逻辑，无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用、

　　2.6 不污染顶级变量：jQuery只建立一个名为jQuery的对象，其所有的函数方法都是在这个对象之下。其别名$也可以随时交出控制权，不会污染其他的对象。这个特性使得jQuery可以与其他JS库共存。

　　2.7 出色的浏览器兼容性

　　2.8 链式操作方式：即对于发生在同一个jQuery对象上的一组操作，可以直接连写而不用重复获取对象

　　2.9 隐式迭代：当用jQuery找到带有.myClass类的全部元素，可以将他们直接全部隐藏，而不用循环遍历每一个返回的元素

　　2.10 行为层和结构层的分离

　　2.11 丰富的插件支持

　　2.12 完善的文档

　　2.13 开源

3. 配置jQuery环境

　　官网下载：http://jquery.com/

　　jquery.js 是开发版，主要用于测试、学习和开发

　　jquery.min.js 是生产版，是经过工具压缩或经过服务器开启Gzip压缩过的，主要用于产品和项目

　　一般是直接在head中直接引入：<script src=" " type="text/javascript"></script>

4. 一般的代码风格

　　4.1 $("#foo")等价于 jQuery("#foo") $是jQuery的简写

　　4.2 $(document).ready(function () { }) 等价于 $(function() {})

　　4.2 链式操作风格：

　　　　$(this).addClass('active') //给当前元素添加 active类

　　　　.next().show() //下一个元素显示

　　　　.parent().sibliings().children('a').removeClass('active') //父元素的同胞元素的子元素a移除类active

　　　　.next().hide() //他们的下一个元素隐藏

　　　　对于同一个对象，不超过3个操作的，可以写在一行：$('li').show().unbind('click');

　　　　对于同一个对象的多个操作，建议每一行写一个操作

　　　　对于多个对象的少量操作，可以让每个对象写一行　　

5. window.onload()与$(document).ready()区别

　　5.1 执行时机不同：window.onload()必须等待网页中所有的内容（包括图片）加载完毕以后，才可以执行；$(document).ready()是网页中所有的DOM结构绘制完毕就可以执行，可能DOM元素关联的东西并没有加载完毕

　　5.2 编写个数不同：window.onload()不可以编写多个；$(document).ready()可以同时编写多个

6. jQuery对象和DOM对象

　　6.1 DOM对象：DOM（文档对象模型），每一份DOM都可以表示成一棵树，在DOM树中，每个子节点都是DOM元素。可以通过JS的getElementById或getElementByTagName来获取元素节点，像这样得到的DOM元素就是DOM对象

　　获取DOM对象：var domObj=document.getElementById("id")

　　6.2 jQuery对象：是通过jQuery包装DOM对象之后产生的对象

　　6.3 如果获取的对象是jQuery对象，在变量名前加$ var $varibal=jQuery对象；如果获取的是DOM对象，var varibal=DOM对象

7. jQuery对象和DOM对象的相互转换

　　7.1 jQuery对象转换为DOM对象

　　　　方法一：jQuery对象是一个类似数组的对象，因此可以通过[index]的方法得到相应的DOM对象

　　　　var $cr=$('#cr') //jQuery对象

　　　　var cr=$cr[0] //DOM对象

　　　　方法二：是jQuery本身提供的，通过get(index)方法得到相应的DOM对象

　　　　var $cr=$('#cr') //jQuery对象

　　　　var cr=$cr.get(0) //DOM对象

　　7.2 DOM对象转换为jQuery对象：对于一个DOM对象，只需使用$()将其包裹起来，就可以转换为jQuery对象了

　　　　var cr=document.getElementByTd('id') //DOM对象

　　　　var $cr=$(cr);

　　7.3 备注：DOM对象才可以使用DOM中的方法，jQuery对象不可以使用DOM对象中的方法

8. 其他

　　is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值

巴特西

JQuery基础知识==认识JQuery

最新文章

热门文章