JQuery学习笔记2
使用JQuery代码
jquery $(document).ready()与window.onload的区别
JS实现键盘监听
jQuery的deferred对象
JQuery中$Ajaxhttp://blog.****.net/ligang2585116/article/details/50070807
JQuery中的选择器
http://blog.****.net/i10630226/article/details/49404679
JQuery中的DOM操作
属性操作与样式操作
属性操作、样式操作、设置和获取HTML,文本和值、Css-Dom操作
方法：attr() attribute属性
1、 addClass() ——给元素设置class属性信息
2、 removeClass() ——把元素对应的class指定属性值给删除 ,
3、 toggleClass(class) ——开关class设置属性，有就给删除，没有就给添加上
4、hasClass()——检查匹配的元素是否含有某个特定的类
1、 html() 获取元素包含的内容
2、 html(参数) 设置元素包含的内容
特点：
① 可以设置元素包含的文本内容
② 也可以设置元素包含的html标签内容
text和html方法区别
获取内容：text:获取内容只关心文本内容，不理会html标签; html:获取内容html和文本内容都起作用
设置内容：text:设置内容，html标签内容转化为符号实体内容；html: html标签和普通文本内容都可以设置
val() 获得指定元素的value信息
val(参数) 设置指定元素的value信息
css(name) 获取样式信息
css(name,value) 设置样式属性信息
css(json对象) 同时设置多个样式属性信息
$与jQuery对象
1、 $符号由来
2、 jquery对象与dom对象互相转化
3、 jquery对象分析
a) jquery生成好的对象继承 jQuery.fn
b) jQuery.fn 通过冒充继承 extend，又得到了许多属性和方法
Each()方法
http://blog.****.net/i10630226/article/details/49450171
var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i); //i为数组索引值 alert(val); //val为具体的值 });
var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr2, function(i, item){ alert(i); alert(item); });
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){ $.each(item,function(j,val){ alert(j); alert(val); }); });
var obj = { one:1, two:2, three:3}; each(obj, function(key, val) { alert(key); //key为属性名 alert(val); //val为属性值 });
<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/> 然后你使用each如下 $.each($("input:hidden"), function(i,val){ alert(val);//val这里是获得的DOM对象 alert(i);//Dom对象的索引 alert(val.name); alert(val.value); });
$("input:hidden").each(function(i,val){ alert(i); alert(val.name); alert(val.value); });
从以上的例子中可知$和jQuery对象都实现了该方法，对于jQuery对象，只是把each方法简单的进行了委托：把jQuery对象作为第一个参数传递给$的each方法。
jQuery中this与$(this)的区别
$("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } );
$("#textbox").hover( function() { $(this).attr(’title’, ‘Test’); }, function() { $(this).attr(’title’, ‘OK’); } );
var node = $('#id'); node.click(function(){ this.css('display','block'); //报错 this是一个html元素，不是jquery对象，因此this不能调用jquery 的css()方法 $(this).css(); //正确 $(this)是一个jquery对象，不是html元素，可以用css()方法 this.style.display = 'block'; //正确 this是一个html元素，不是jquery对象，因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性 });
DOM事件操作
动画效果
JSON与JSONP，ajax jsonp跨域方法详解