JavaScript类库---JQuery（一）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

1、基础：

Jquery类库定义了一个全局函数：JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。返回一个新创建的JQuery对象；

另：JQuery中定义的许多方法返回值都是JQuery对象(方法的调用者)；JQuery中函数:$.each() JQuery中方法：**.each()没有$符号;

JQuery方法的4种不同调用方式：

参数是字符串表示的CSS选择器：$('.class')返回当前文档中匹配到的元素集。第二个参数是可选的，值为一个元素或JQuery对象；这时返回的是特定元素的子元素中匹配到的元素集；

参数是Element、Document或Window对象，返回这些对象封装成的JQuery对象；
参数是HTML文本字符串：(不能是纯文本，会被当做CSS字符串的)返回文本创建好的HTML元素并封装成的JQuery对象；此方式接受可选的第二个参数；1、可以用Document对象来指定与所创建元素相关联的文档。2、可以使用object对象，该对象的属性名是Jquery关键字时，可用于传入属性值；
参数为一个函数：文档加载完毕时调用；相当于onLoad()函数；形如$(function(){})或JQuery(function(){});

JQuery遍历用的几个基础方法：

each(): 例$('div').each(function(index,this){});此方法唯一参数为一个回调函数，回调函数的有两个参数：索引值和this(指代当前元素Element，原生文档对象),this使用JQuery方法时需要封装一下$(this); 如果回调函数返回false时，遍历将中断；
map(); 例$(':checkbox').map(function(){return this.name}).toArray(); 参数与以上方法基本相同,回调函数中的参数可以不写，且回调函数返回null或undefined时，此值将被忽略；map的返回值为新的包含回调函数所有返回值的JQuery对象；
index() : 参数为一个元素或字符串(当做CSS选择器使用)，返回值为该元素在此JQuery对象中的索引值，找不到返回-1；
is() : 例：$(div).each(function(){if($(this).is(':hidden')) return;}); 参数是一个选择器，匹配到就返回true；

2、JQuery中的属性操作：

JQuery使用同一个方法来获取和设置属性，区别是参数的不同，类似于重载；

setter(设置)时返回的是JQuery对象；getter(获取)时返回单个值(元素)；所以链式调用不能使用getter;

setter接受对象参数：{key：value;k:v} 里面是属性名与属性值的k-v形式；

HTML属性：设置：$("id class ele...").attr('name','value')，获取：$('').attr('name'); 移除：$().removeAttr('name');
CSS属性：设置：$().css(k,v) ; 获取：$().css(key);
CSS类：设置：$("h1").addClass('classname1,name2'); 删除：$("h1").removeClass('name1,name2'); 切换(如果存在就删除，不存在就添加)：$('div').toggleClass('name1,name2'); 检测：$('div').hasClass('name');或 $('#di').is('name');只接受单个类名；
HTML表单：设置：$("#inputname").val('text'); $('input:checkbox').val(["v1","v2"]); 获取：$("#ipname").val();
HTML元素：设置：text()：纯文本；html():HTML内容格式； x.html() === x[0].innerHTML;
元素数据：设置与获取与文档、元素、window对象相关联的数据 $('div').data("x",1); 获取$('div').data('x');

3、文档操作：