一、什么是jquery?它的特点?
jQuery 是一个 JavaScript 库,jQuery 极大地简化了 JavaScript 编程。
特点：
(1).一款轻量级的js库。
JQuery核心js文件大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后，大小只有18KB。，不会影响页面加载速度。与Extjs相比要轻便的多。
(2).丰富的DOM选择器
JQuery的选择器用起来很方便，好比要找到某个dom对象的相邻元素js可能要写好几行代码，而JQuery一行代码就搞定了，再比如要将一个表格的隔行变色，JQuery也是一行代码搞定。
(3).链式表达式。
JQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
(4).事件、样式、动画支持。
JQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
(5).Ajax操作支持。
JQuery简化了AJAX操作，JQuery将所有的Ajax操作封装到一个函数$.ajax()里，后台只需返回一个JSON格式的字符串就能完成与前台的通信。
(6).跨浏览器兼容。
JQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
(7).插件扩展开发。
JQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前台页面上的组件都有对应插件，并且用JQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。
(8).链式操作方式。
JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作，可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
(9).隐式迭代。
当用JQuery找到带有“.myClass”类的全部元素，然后隐藏他们时。无需循环遍历每一个返回的元素。相反，JQuery里的方法都被设计成自动操作的对象集合，而不是单独的对象，这使得大量的循环结构变得不再必要，从而大幅度地减少代码量。
二、jquery语法：
1.基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
2.入口函数：
(1)第一种：常用的
$(function() {
代码体...
})
(2)第二种：等价于第一种（第一种书写更简单）
$(document).ready(function(){
代码体...
})
面试题：
jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
三、JavaScript和jQuery方法之间的互相转换：
1. js 方法 转化成 jq 获取 （使用$美元符）
/*方法一*/ /*[index]：中括号*/
alert($(document.getElementsByClassName("box")[0]).attr("name")); //用jquery的attr方法获取下标为0，class名为.box的name属性
2. jq 方法 转化成 js 获取
/*方法一*/ /*[index]：中括号*/
alert($(".box")[0].getAttribute("name")); //用js的原生方法getAttribute方法获取下标为0，class名为.box的name属性
/*方法二*/ /*get(0)方法*/
alert($(".box").get(0).getAttribute("name")); //用js的原生方法getAttribute方法获取下标为0，class名为.box的name属性
四、jQuery中$美元符的作用：（常见的用法）
1. 将js方法转换成jQuery方法： $(JS的选择器)
eg:$(document.getElementsByClassName("box")[0]).attr("name")
注释：上述写法就是将JS获取的元素，通过$()的方式转换成jQuery的选择器，从而使用jQuery的attr()属性操作。
2. 当传进去的参数是函数的时候，则在document对象上绑定一个ready事件监听函数，当DOM结构加载完成的时候执行：jQuery(callback)：
eg: $(function(){ })
//以上代码和下面的效果是一样的
$(document).ready(function(){
...//代码
})
3. 用所提供的html代码创建DOM元素 ： jQuery(html)|
eg:$('<div>这是用jq方法创建的一个div，用appendTo将这个div动态添加到body里</div>').appendTo('body');
4. 如果传入一个DOM元素或者是DOM元素的数组，则把DOM元素封装到jQuery对象中并返回。
eg: // 传入DOM元素,
$('li').each(function(){
$(ele).on('click',function(){
$(this).css('background','red'); //这里的DOM元素就是this
})
})
5. 当传进去的参数是一个jQuery对象的时候，则创建该jQuery对象的一个副本并返回。副本与传入的jQuery对象引用完全相同的元素
eg:var aLi=$('li');
var copyLi=$(aLi); //创建一个aLi的副本
console.log(aLi);
console.log(copyLi);
console.log(copyLi===aLi);
网友评论