我的jQuery学习笔记（持更）

js和jQuery的区别

1.原生JS和jQuery入口函数的加载模式不同
原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行
jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行
2.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的
jQuery中编写多个入口函数,后面的不会覆盖前面的

入口函数

1.第一种写法
$(document).ready(function () {
alert(“hello lnj”);
});
2.第二种写法
jQuery(document).ready(function () {
alert(“hello lnj”);
});
3.第三种写法(推荐)
$(function () {
alert(“hello lnj”);
});
4.第四种写法
jQuery(function () {
alert(“hello lnj”);
});

补充：
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function())可以简写成$(function(){});

冲突问题

1.释放$的使用权

注意点:
释放操作必须在编写其它jQuery代码之前编写
释放之后就不能再使用$,改为使用jQuery
jQuery原理.noConflict();
2.自定义一个访问符号

var nj = jQuery.noConflict();        
nj(function () {
            		alert("hello lnj");       
            });

核心函数

// $();/jQuery原理();就代表调用jQuery的核心函数

    // 1.接收一个函数        
    $(function () { 
    alert("hello lnj");           
    
     // 2.接收一个字符串           
     // 2.1接收一个字符串选择器           
     // 返回一个jQuery对象, 对象中保存了找到的DOM元素            
     var $box1 = $(".box1");           
     var $box2 = $("#box2");            
     console.log($box1);            
     console.log($box2);           
    // 2.2接收一个字符串代码片段           
    // 返回一个jQuery对象, 对象中保存了创建的DOM元素            
         var $p = $("<p>我是段落</p>");            
         console.log($p);            
         $box1.append($p);           
         
      // 3.接收一个DOM元素           
      // 会被包装成一个jQuery对象返回给我们           
       var span =document.getElementsByTagName("span")[0];            
       console.log(span);           
       var $span = $(span);            
       console.log($span);        
           });

对象

• 1.什么是jQuery对象
  jQuery对象是一个伪数组
• 2.什么是伪数组?
  有0到length-1的属性, 并且有length属性

静态方法和实例方法

 <script>       
  // 1.定义一个类       
   function AClass() {   
        }        
   // 2.给这个类添加一个静态方法        
   // 直接添加给类的就是静态方法        
   AClass.staticMethod = function () {            
   	alert("staticMethod");        
   }       
    // 静态方法通过类名调用        
    AClass.staticMethod();
        
   // 3.给这个类添加一个实例方法        
   AClass.prototype.instanceMethod = function () {
               alert("instanceMethod");
 }        
   // 实例方法通过类的实例调用       
    // 创建一个实例(创建一个对象)        
    var a = new AClass();        
    // 通过实例调用实例方法        
    a.instanceMethod();    
    </script>

静态方法each方法

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
1.利用js的each静态方法遍历数组
第一个参数: 遍历到的元素
第二个参数: 当前遍历到的索引
注意点:原生的forEach方法只能遍历数组, 不能遍历伪数组

arr.forEach(function (**value**, **index**) {
	console.log(index, value);        
 });

2.利用jQuery的each静态方法遍历数组
第一个参数: 当前遍历到的索引
第二个参数: 遍历到的元素
注意点: jQuery的each方法是可以遍历伪数组的

$.each(arr, function (**index**, **value**) { 
	    console.log(index, value); 
});

静态方法map方法

var arr = [1, 3, 5, 7, 9];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
1.利用原生JS的map方法遍历
第一个参数: 当前遍历到的元素
第二个参数: 当前遍历到的索引
第三个参数: 当前被遍历的数组
注意点:和原生的forEach一样,不能遍历的伪数组

arr.map(function(value , index , array){
	console.log(index , value , array);
});

第一个参数: 要遍历的数组
第二个参数: 每遍历一个元素之后执行的回调函数
回调函数的参数:
第一个参数: 遍历到的元素
第二个参数: 遍历到的索引
注意点:和jQuery中的each静态方法一样, map静态方法也可以遍历伪数组

$.map(arr , function(value , index){
	console.log(index , value);
});

jQuery中的each静态方法和map静态方法的区别:
each静态方法默认的返回值就是, 遍历谁就返回谁
map静态方法默认的返回值是一个空数组

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

var res = $.map(obj, function (value, index) {
            console.log(index, value);            
            return value + index;        
            });
console.log(res);

jQuery中的其它静态方法

$.trim();
作用: 去除字符串两端的空格
参数: 需要去除空格的字符串
返回值: 去除空格之后的字符串

$.isWindow();
作用: 判断传入的对象是否是window对象
返回值: true/false

$.isArray();
作用: 判断传入的对象是否是真数组
返回值: true/false

$.isArray();
作用: 判断传入的对象是否是一个函数
返回值: true/false
注意点:jQuery框架本质上是一个函数

$.holdReady(true);
作用: 暂停ready执行

jQuery内容选择器

编写jQuery相关代码

:empty 作用:找到既没有文本内容也没有子元素的指定元素
var $div = $(“div:empty”);

:parent 作用: 找到有文本内容或有子元素的指定元素
var $div = $(“div:parent”);

:contains(text) 作用: 找到包含指定文本内容的指定元素
var $div = $(“div:contains(‘我是div’)”);

:has(selector) 作用: 找到包含指定子元素的指定元素
var $div = $(“div:has(‘span’)”);

属性和属性节点

1.什么是属性?
对象身上保存的变量就是属性

2.如何操作属性?
对象.属性名称 = 值;
对象.属性名称;
对象[“属性名称”] = 值;
对象[“属性名称”];

3.什么是属性节点?

在编写HTML代码时,在HTML标签中添加的属性就是属性节点
在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
在attributes属性中保存的所有内容都是属性节点

4.如何操作属性节点?
DOM元素.setAttribute(“属性名称”, “值”);
DOM元素.getAttribute(“属性名称”);

5.属性和属性节点有什么区别?
任何对象都有属性, 但是只有DOM对象才有属性节点

<span name = “it666” . ><./span >

var p = new Person();
p.name = “lnj”;
p[“name”] = “zs”;

Query的attr方法

1.attr(name|pro|key,val|fn)
作用: 获取或者设置属性节点的值
可以传递一个参数, 也可以传递两个参数
如果传递一个参数, 代表获取属性节点的值
如果传递两个参数, 代表设置属性节点的值

注意点:
如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
如果是设置:找到多少个元素就会设置多少个元素
如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

2.removeAttr(name)
删除属性节点

注意点:
会删除所有找到元素指定的属性节点
$(“span”).attr(“class”, “box”);

jQuery的prop方法

1.prop方法
特点和attr方法一致
2.removeProp方法
特点和removeAttr方法一致