从零玩转jQuery（一）

第三步：编写jQuery代码

例如：

<script>// 原生js固定写法window.onload = function(ev){}// jQuery固定写法$(document).ready(function(){alert(\'hello world\')})</script>

二、jQuery入口函数

$(document).ready(function(){})

三、jQuery和JS加载模式的不同

• 原生JS：

  可以通过原生JS入口函数拿到DOM元素

• 可以通过原生JS入口函数拿到DOM元素的宽高

jQuery：

可以通过JQuery入口函数拿到DOM元素
• 不可以通过jQuery入口函数拿到DOM元素的宽高

原生JS和jQuery入口函数的加载模式不同：

原生JS会等到DOM元素加载完毕，并且图片也加载完毕才会执行；原生JS编写了多个入口函数，后面编写的会覆盖前面的

jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕才执行；jQuery中编写多个入口函数，后面的不会覆盖前面的

四、入口函数写法

//方法1$(document).ready(function(){})//方法2jQuery(document).ready(function(){})//方法3（推荐方式）$(function(){})//方法4jQuery(function(){})

五、jQuery的冲突问题

在多个框架中，都有访问符，调用的时候会失效（后面的框架访问符，调用的时候会失效（后面的框架访问符，调用的时候会失效（后面的框架访问符会覆盖前面的框架$访问符）

解决办法：

1. 释放$的使用权：jQuery.noConflict()

   该方法必须写在其他jQuery代码之前，释放之后不能使用$,改为使用jQuery

2. 自定义一个访问符：var 访问符 = jQuery.noConflict()

六、jQuery核心函数

$()或jQuery()
功能：
接受一个字符串选择器、接受一个字符串代码片段、接受一个DOM元素

<script>// jQuery入口函数$(function(){alert(1)// 接受一个字符串选择器（返回一个jQuery对象，对象中保存了找到的DOM元素	）var $box1 = $(\'.box1\')var $box2 = $(\'#box2\')console.log($box1,$box2)// 接受一个字符串代码片段（返回一个jQuery对象，对象中保存了创建的DOM元素）var $p = $(\'<p>我是一个片段</p>\')console.log($p)$box1.append($p)})// 接受一个DOM元素（包装成一个jQuery对象）var span = document.getElementsByTagName(\'span\')[0]console.log(span)var $span = $(\'span\')console.log($span)</script>

七、静态方法跟实例方法

静态方法是给类添加，调用是类名.静态方法

实例方法是给类的原型添加，调用是用实例对象.实例方法

<script>// 定义一个类function AClass(){}//给类添加一个静态方法AClass.staticMethod = function(){alert(1)}// 调用静态方法AClass.staticMethod()// 给这个类添加一个实例方法AClass.prototype.instanceMethod = function(){alert(2)}var a = new AClass()a.instanceMethod()</script>

八、each()方法

• 原生JavaScript中的forEach()方法：遍历数组第一个参数：遍历到的元素
• 第二个参数：当前遍历的索引
• 注意点：只能遍历数组，不可以遍历伪数组

第一个参数：当前遍历的索引
• 第二个参数：遍历到的元素

<script>var arr = [1,3,5,7,9]var obj = {0:1,1:3,2:5,3:7,4:9}arr.forEach(function(value,index){console.log(index,value)})obj.forEach(function(value,index){ //报错console.log(index,value)})$.each(arr,function(index,value){console.log(index,value)})$.each(obj,function(index,value){console.log(index,value)})</script>

九、map()方法

• 原生JavaScript中的map()方法：遍历数组第一个参数：遍历到的元素
• 第二个参数：当前遍历的索引
• 第三个参数：当前被遍历的数组
• 注意点：只能遍历数组，不可以遍历伪数组

第一个参数：要遍历的数组
• 第二个参数：没遍历一个元素之后执行的回调函数
• 回调函数中的参数：第一个参数：遍历到的元素
• 第二个参数：当前遍历的索引

jQuery中的each方法与map方法的区别：

1、each静态方法中默认的返回值是：遍历谁就返回谁；map静态方法默认的返回值是一个空数组

2、each静态方法不支持在回调函数中对遍历的数组进行处理；map静态方法可以在回调函数中通过return对遍历的数组进行处理，并生成一个新的数组返回

<script>var arr = [1, 3, 5, 7, 9]var obj = {0: 1,1: 3,2: 5,3: 7,4: 9,length:5}arr.map(function(value,index,array){console.log(index,value,array)})obj.map(function(value,index,array){ //报错console.log(index,value,array)})$.map(arr,function(value,index){console.log(index,value)})var res = $.map(obj,function(value,index){console.log(index,value)return value + index})var res2 = $.each(obj,function(index,value){console.log(index,value)return value + index})console.log(res)console.log(res2)</script>

十、其他静态方法

1. $.trim()：去除字符串两边的空格
2. $.isArray()：判断是否为真数组
3. $.isFunction()：判断是否为函数
4. $.window()：判断是否为window

十一、holdReady()方法

作用：暂停jQuery入口函数

$.holdReady(true)

true为暂停，false为取消暂停

十二、jQuery内容选择器

• :empty作用：找到既没有文本内容也没有子元素的指定元素
• :parent作用：找到有文本内容或有子元素的指定元素
• :contains()作用：找到包含指定文本内容的指定元素
• :has()作用：找到包含指定子元素的指定元素

十三、属性操作

• 什么是属性：对象身上保存的变量
• 如何操作属性：对象.属性名称 = 值；对象[‘属性名称’] = 值
• 什么是属性节点：在编写HTML代码时，在HTML标签中添加的属性就是属性节点（在浏览器中找到这个DOM元素后，展开看到的都是属性，字attributes属性中保持的所有内容都是属性节点）
• 操作属性节点：DOM元素.setAttribute(‘属性名称’,‘值’)
• DOM元素.getAttribute(‘属性名称’)