jQuery从零开始

最近根据传智博客视频学习了一下jQuery，做了些笔记，现在贴出来一起分享：


一、jquery的基础知识：选择器、及常用的基础函数
1、$(document).ready(function(){alert(“aa”)});相当于window.onload,但是ready可以连续注册多个，而onload只能一次；ready在dom初始化完毕（不管图片什么的是否加载完毕）就执行，而onload在全部加载完成后执行。

2、$(function(){alert(“aa”);})等于$(document).ready(function(){alert(“aa”)});

3、$.map(array,function)将array风格数组的里的所有值依次执行function函数,并返回一个新的array
例：var arr = [3,4,8];
var arr2 = $.map(arr,function(item){ return item*3 ;});

例：var arr = [3,4,8];
var arr2 = $.map(arr,function（）){ alert（this）;});

4、$.each(dict，function);将一数组里每个元素执行function，无返回值。
例：var arr = {“Tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”莉莉”};
$.each(arr,function(key,value){alert(key+”=”+value);});

例：var arr = [3,4,8];
$.each(arr,function(key,value){alert(key+”=”+value);});

例：var arr = [3,4,8];
$.each(arr,function(item){alert(item);}); //处理的为key

例：var arr = {“Tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”莉莉”};
$.each(arr,function(){alert(this);}); //处理的为当期值

例：var arr = {“Tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”莉莉”};
$.each(arr,function(){alert(this);}); //处理的为当期值

当链式调用时也可以：arr.each(function(){alert(this);})

5、如果想使用jquery对象的函数，首先要将Dom对象转换为jquery对象
Jquery对象：$(‘#div1’) id为div1的对象
Dom对象：document.getElementById(‘div1”) id为div1的对象

6、jquery与dom对象的转换：
Dom对象-》jquery对象：$(‘#div1’)
Jquery对象-》dom对象：var div1_2 = $(‘#div1’)[0];
或var div1_2 = $(‘#div1’).get(0);

7、$(‘#div1’).html()：相当于Dom的innerHTML;

8、jquery常用dom操作函数：
jquery修改样式：$(‘#div1’).css(“background”,”red”);
获得样式：$(‘#div1’).css(“background”);
修改value：$(‘#div1’).val(“789”);
取得value：$(‘#div1’).val();

设置属性：$(“#btn1”).attr(“href”,”http://www.baidu.com”);
得到属性：$(“#btn1”).attr(“href”);
移除属性：removeAttr()

同理设置与取得text、html
html：为dom的innerHTML，包含html格式
text：为dom中不带html格式的innerHTML，即纯文本。

9、jquery的选择器 $：
$(“p”)：TagName选择器
$(“#div1”)：id选择器
$(“.aa”)：css选择器
$(“p,div,span.menuitem”)：多条件选择器，同时选择p标签，div标签，和拥有menuitem
样式（即class=“menuitem“）的span标签元素
层次选择器(选择器后的空格一个都不能多也不能少)：
（1）$(“div li”)：获得div下的所有li元素（后代，子、子的子……）
（2）$(“div > li”)：获得div下的直接li子元素
（3）$(“.menuitem + div”)：获得样式名为menuitem之后的第一div元素（不常用）
（4）$(“.menuitem ~ div”)：获得样式名为menuitem之后的所有的div元素（不常用）

10、给对象注册函数
<script>
$(function(){ //注册ready函数，即加载时候执行
$(“p”).click(function(){alert(“我是p”);} //给所有的p标签注册click事件
});
</script>

11、得到数组大小：length
常用于判断原素是否存在
Var elementes = $(“#btn”);
If(elements <= 0 ){
Alert（”error”）;
}

12、节点的遍历：
next()：用于获取节点之后的第一个同辈元素
例：$(“.menuitem”).next(); //下一个同辈元素
$(“.menuitem”).next(“div”); //下一个同辈的div元素（一定要挨着）

nextAll()：用于获取节点之后的所有同辈元素
例：$(“.menuitem”).nextAll(); //后面所有的同辈元素
$(“.menuitem”).nextAll(“div”); //后面所有的同辈的div元素

$(“.menuitem”).siblings(); //用于获得所有的同辈元素
$(“.menuitem”).siblings(“div”); //用于获得所有的同辈div元素


常用于对同辈元素做集体操作，例如：
$(“div”).click(function(){
$.each($(“this”).nextAll(“div”),function(){$(this).css(“background”,”red”);});
});
或：
$(“div”).click(function(){
$(“this”).nextAll(“div”).css(“background”,”red”);
});

//点击后，将当前div背景变为红色，其余为白色
$(“div”).click(function(){$(this).css(“background”,”red”);$(this) .siblings(“div”).css(“background”,”white”);})

13、链式编程
$(“div”).click(function(){$(this).css(“background”,”red”);$(this) .siblings(“div”).css(“background”,”white”);})
可以写成$(“div”).click(function(){$(this).css(“background”,”red”).siblings(“div”).css(“background”,”white”);})

14、鼠标划过特效：
$("#tab td").html("AAAA")..mouseover(function(){
$("#tab td").html("AAAA");
$(this).nextAll().html("BBBB");
});

Html：
<table id="tab">
<tr>
<td></td>
<td></td>
</tr>
</table

15、过滤器：
:frist 选取第一个元素 $(“div:first”) 第一个div
:last 最后一个 $(“div:last”) 最后一个div
:not 选择不满足选择器条件的元素 $(“input:not(.myClass)” 选择样式名不是 myClass的input
:even :odd 选取索引是奇数、偶数的元素 $(“input:even”) 为奇数的input
:eq(索引号) :gt(索引号) :lt(索引号) 选取等于、大于、小于给定索引号的元素， $(“input:lt(1)”) 选取索引号小于1的<input>
$(“:header”) 选取所有h1……h6元素
$(“div:animated”) 选取所有正在执行动画的<div>元素 不常用，知道就行了
$(“body *”) body下所有的标签

例：$(“#table1 tr:gt(0):lt(4)).css(“fontSize”,”28”); 注：当gt（0）后会产生一个心的序列，lt（4）是新的序列的索引号，而不是原始的。
$(“#table1 tr:first).css(“fontSize”,”30”);

$("#tab tr:gt(0):even").css("background","red"); //第一行标题行不算
$("#tab tr:gt(0):odd").css("background","blue"); //第一行标题行不算

或：$("#tab tr:odd").css("background","red"); //第一行标题算
$("#tab tr:gt(0):odd").css("background","blue"); //第一行标题行不算

或：$("#tab tr:gt(0):even").css("background","red"); //第一行标题行不算
$("#tab tr:even").css("background","blue"); //第一行标题算
最好选择第一种


属性过滤器
$(“div[id]”) 选择有id属性的<div>
$(“div[title=test]”) 选取title属性为test的<div>
$(“div[title!=test]”) 选取title属性不为test的<div>
例：$(“input[name=password]”) 选取input的name=”password”的<input>
相当于getElementsByName()
$(“div[title^=test]”) 选取属性中以test开头的
$(“div[title$=test]”) 选取属性中以test结束的
$(“div[title*=test]”) 选取属性中包含test的

表单过滤器
$(“#form1:enabled”) 选取id为form1的表单内所有启动的元素
$(“#form1:disabled”) 选取id为form1的表单内所有禁用的元素
$(“input:checked”) 选取所有已被选中的元素(Radio、CheckBox)
$(“select:selected”) 选取所有选中的选项元素(下拉列表)

表单过滤器默认不迭代，需要自己手动完成
例：$(function(){
$(“input:checked”}.each(function(){$(this).val();})
});
表单选择器：
$(“:input”) 选取所有需要提交服务器的表单元素：<input>、<textarea>、<select>、<button>元素。和$<”input”>区别，$<”input”>只获取<input>元素
$(“:text”) 选取所有的单行文本框。相当于$(“input[type=’text’]”)
$(“:password”) 选取所有密码框。同理还有：:radio、:checkbox、:submint、:image、
:reset、:button、:file、:hidden。

16、相对选择器：路径的定位
$(“div1 ul”) //绝对定位，从根元素算起，div1下的ul
$(“ul”,”$(div1”)) //相对定位，相对于$(“div1”)为基准进行相对选择
例：$(“div1”).click(function(){$(“ul”,$(this)).css(“background”,”red”);});
//$(this) 相对于当期元素下的ul


二、jquery的应用
1、创建Dom对象
$(html字符串) 创建一个dom节点，病返回一个jquery对象、然后调用append等方法添加节点
例：var link = $(“<a href=http://www.baidu.com>百度</a>”);
//link.html(“baidu”);
$(“div:first”).append(link); //追加
append() 在元素标签末尾追加元素（子元素）
prepend() 在元素标签开始加入元素（子元素）
after() 在元素之后添加元素（兄弟元素）
before() 在元素之前添加元素（兄弟元素）
remove() 删除选择的节点对象，返回值为删除的节点对象，还可以在次添加
empty() 将节点清空

例：var lis = $(“#ulSite li”).remove();
$(“#ulSite2”).append(lis);


字符串转化为数字：
var aa = 233;
var bb = parseInt(aa,10); //将aa转化为10进制数

设置光标图案：
$(“#ul1 li”).css(“cursor”,”pointer”).mouseover(function(){
$(this).css(“background”,”red”).siblings().css(“background”,”white”);
};)

2、节点的操作
replaceWith() //替换
例：$(“br”).replaceWith(“<hr/>”); //将所有的<br/>替换为<hr/>
wrap() //用来将指定的元素逐个用指定的标签包裹
例：$(“b”).wrap(“<font color=’red’></font>”) //将所有的粗体字红色显示

3、样式操作：
attr(“class”); 得到样式
attr(“class”,”class1”); 设置样式
attr(“class”,”class1 class2 class3”); 设置多个样式，样式可以同时指定多个：class=”class1 class2 class3”
addClass(“newClass”); 添加样式（不影响其他样式）
removeClass(“myClass”); 移除样式（不影响其他样式）
toggleClass(“myClass”); 切换样式：如果拥有这个样式则删除，没有则添加
hasClass(“myClass”); 检测是否拥有指定的样式

4、checkbox、radio的操作
$(“:radio[name=’radio1’]:checked”).val(); 得到选中项
$(“:radio[name=’radio1’]”).val([“女”]); 选中一项（[]不能少）

$(“:checkbox:checked”).val() 得到选中项
$(“:checkbox”).val([“篮球”,”冰球”]); 选中一项（[]不能少）
或$(“:check[value=羽毛球].attr(“checked”,true);


三、jquery的事件

bind() 事件绑定，可以用于绑定任何事件（包括自定义的） 例：$().bind(“click”,fun)是$().click(fun)完整写法
unbind() 移除事件绑定 例：$().unbind(“click”)移除click事件

$().bind(“click”,fun1=function(){……}).bind(“click”,fun3=function(){……}).bind(“click”,fun3=function(){……}) 当同时绑定多个同一种事件时
$().unbind(“click”,fun2) //取消第二个click
one() 一次性绑定，只使用一次，随后便unbind()
click(function) 单击事件
hover(fun1,fun2) 鼠标经过，包括两个事件，fun1鼠标经过（mouseenter），fun2鼠标离开（mouseleave）
事件冒泡 jquery默认的是有事件冒泡的（事件冒泡：如果有多个标签是包换关系，而每个标签都定义了时间，那么从内到外依次触发）
stopPropagation() 终止冒泡
$(“tr”).click(function(e){……}) 如果用到事件对象那么在funciton里加一个e (默认用e，但是别的也是可以的),如单击时候的坐标，位置等等
preventDefault() 阻止默认行为（如超链接的跳转，提交按钮的提交）
例：$(“a”).click(function(e){
alert(“暂时阻止所有超链接的单击(跳转)”);
e.preventDefault();
});


可以做动画的一些函数：

show() 显示，相当于display=“block“。
hide() 隐藏，相当于display=“none“
toggle() 无参数时则在显示与隐藏间切换
如果show（）、hide（）和toggle（）不带参数则立即显示隐藏，带参数则有个过度效果。其中（）内参数有三个常量：fast（200毫秒）、slow（600毫秒）、normal（400毫秒），也可以直接用常数，单位为毫秒可实现动画效果

fadeIn() 渐变效果（可带时间）
fadeOut() 渐变效果（可带时间）
slideUp() 卷帘的效果
slideDown() 卷帘的效果
animate({css效果},时间,function) 动画效果的基类。
css效果：最终要实现的显示效果
时间：多长时间完成
function：回调函数，完成后执行（可省略）

例：
$(“#div1”).animate({left:”500px”},3000,function(){alert{“over”};});//实现效果为单击后div距左边距为500px;
$(“#div1”).animate({left:”+=500px”},3000,function(){alert{“over”};});//实现效果为每次单击后div左边距为加500px;
$(“#div1”).animate({left:” 500px;height:300px”},3000,function(){alert{“over”};});
//单击后将左边距变为500px，高度变为300px
$(“#div1”).click(function(){$(“#div1”).animate({left:”500px” },3000)..animate({height:”500px” },3000}); //单击后先将左边距变为500px，然后将高度变为500px，供6秒

$(“#div1”).css(“opacity”,0.5) 设置透明度


事件e的属性：
pageX 相当于Dom的clientX
pageY 相当于Dom的clientY
target 相当于Dom的srcElement（事件源元素，冒泡的起始位置，和this不一样）
例：function(e){alert($(this).html());}
function(e){alert($(e.target).html());}
which 鼠标哪个键摁下了（1左键，2中键，3右键）
altKey、shiftKey、ctrlKey 获得alt、shift、ctrl是否被摁下，为bool值
keyCode 键盘码（小键盘的数字和大键盘的keyCode不一样）
charCode aisc码（但是aisc码是一样的）


四、jquery插件

1、jquery操作cookie：使用插件jquery.cookie.js

$.cookie('the_cookie'); // 获得cookie 例：$.cookie(“userName”);
$.cookie('the_cookie', 'the_value'); // 设置cookie 例：$.cookie(“username”,”tom”);
$.cookie('the_cookie', 'the_value', { expires: 7 }); //设置带时间的cookie
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie(’the_cookie’, ‘the_value’, {expires: 7, path: ‘/’, domain: ‘jquery.com’, secure: true});//新建一个cookie 包括有效期（天）， 路径（网站下哪些路径下的页面可以读这个cookie）， 域名等

注意：
<1>{}内的选项是可选的，用哪个选哪个，注意别忘了加{}
<2>如果不设expires的值，那么默认的cookie在页面关闭后即被销毁，如果想下次 登录后使用的话，那么这个值是一定要设的
<3>path指定域名下哪些目录下的文件能够读取此cookie，默认为根目录”/”
<4>domain指定域名，必须为自己的域名，一种技巧即设置成一级域名，这样二级三级域名下的网页都可以访问此cookie

2、jquery的ajax（与struts2）
例：$(function(){
$("#login").click(function(){
$.ajax({ //一个小括号“（”，一个大括号“{”
type:"GET",
url:"ajax/test_jquery", //action的动态请求methodName表示你要请求的action的方法
data:{"user.email":$("#name").val(),"user.password":$("#password").val()}, //参数
dataType:"json", //返回数据类型
success:function(data,textStatus){
alert("成功保存数据："+data.toString());
}
});
});
});


为方便，现将word文件附加在最后，想要学习的朋友可下载参考