JQuery学习笔记

JQuery是一个javascript的框架，是对javascript的一种封装。 

通过JQuery可以非常方便的操作html的元素 

 

$(function(){

}); //表示html元素DOM全部加载完毕,此时才执行HTML方法

等同于

$(document).ready(function(){

});

 

常见方法
关键字	简介
val	取值
html	获取元素内容,如果有子元素，保留标签 如果带参数(代表向其添加innerhtml值)
Text	获取元素内容,如果有子元素，不包含子元素标签
$.trim()	去除首尾空白
$.parseJSON()	将JSON格式的字符串，转换为JSON对象
CSS	JQuery 对CSS元素的封装
addClass	增加class
removeClass	删除class
toggleClass	切换class
css	css函数
Jquery有多达数十种选择器，常用选择器列出来
关键字	简介
$("tagName")	元素 $("div").addClass("pink");
$("id")	Id $("#b1")
$("className")	类 $(".d")
$("selector1 selector2")	层级 $("div#d3 span").addClass("pink");
:first :last	最先最后
:odd :even	奇偶
:hidden :visible	可见性 $("div:visible").hide(); $("div:hidden").show();
[attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value]	属性 $("div[id]"). 有ID属性的 $("div[id='pink']") id=pink的   $("div[id^='p']"). id以p开头的 $("div[id$='k']"). id 以k结尾的 $("div[id*='ee']"). id包含ee的
:input :button :radio :checkbox :text :button :file :submit :image :reset	表单对象
:enabled :disabled :checked :selected	表单对象属性
this	当前元素

经典Demo

<script src="http://how2j.cn/study/jquery.min.js"></script>

 

<script>

$(function(){

$(".b").click(function(){

var value = $(this).val();

$("td[rowspan!=13] "+value).toggle(5); //找到 td (属性rowspan!=13):value 选择器 toggle切换显示或隐藏

});

 

});

 

</script>

 

<style>

table{

border-collapse:collapse;

table-layout:fixed;

width:80%;

}

table td{

border-bottom: 1px solid #ddd;

padding-bottom: 5px;

padding-top: 5px;

}

 

div button{

display:block;

}

 

</style>

 

<table>

<tr>

 

<td rowspan="13" valign="top" width="150px">

<div >

<button value=":input" class="b">切换所有的:input</button>

<button value=":button" class="b">切换:button</button>

<button value=":radio" class="b">切换:radio</button>

<button value=":checkbox" class="b">切换:checkbox</button>

<button value=":text" class="b">切换:text</button>

<button value=":password" class="b">切换:password</button>

<button value=":file" class="b">切换:file</button>

<button value=":submit" class="b">切换:submit</button>

<button value=":image" class="b">切换:image</button>

<button value=":reset" class="b">切换:reset</button>

</div>

</td>

<td width="120px">说明</td>

<td width="120px">表单对象</td>

<td width="">示例</td>

</tr>

<tr>

<td >input按钮</td>

<td >:button</td>

<td><input type="button" value="input按钮"/></td>

</tr>

 

<tr>

<td>button按钮</td>

<td >:button</td>

<td><button>Button按钮</button></td>

</tr>

<tr>

<td>单选框</td>

<td >:radio</td>

<td><input type="radio" ></td>

</tr>

<tr>

<td>复选框</td>

<td >:checkbox</td>

<td><input type="checkbox" ></td>

</tr>

 

<tr>

<td>文本框</td>

<td >:text</td>

<td><input type="text" /></td>

</tr>

<tr>

<td>文本域</td>

<td ></td>

<td><textarea></textarea></td>

</tr>

<tr>

<td>密码框</td>

<td >:password</td>

<td><input type="password" /></td>

</tr>

<tr>

<td>下拉框</td>

<td ></td>

<td><select><option>Option</option></select></td>

</tr>

 

<tr>

<td>文件上传</td>

<td >:file</td>

<td> <input type="file" /></td>

</tr>

 

<tr>

<td>提交按钮</td>

<td >:submit</td>

<td><input type="submit" /></td>

</tr>

<tr>

<td>图片型提交按钮</td>

<td >:image</td>

<td><input type="image" src="http://how2j.cn/example.gif" /></td>

</tr>

 

<tr>

<td>重置按钮</td>

<td >:reset</td>

<td><input type="reset" /></td>

</tr>

 

</table>

筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。
关键字	简介	示例代码
first() last() eq(num)	第一个 最后一个 第几个 $("div").last() $("div").eq(4). 第四个	示例代码
parent() parents()	父 祖先(包括父亲和其他的所有)	示例代码
children() find()	儿子 后代(包括儿子和其他的所有)	示例代码
siblings()	同级(所有兄弟)	示例代码
属性
关键字	简介	示例代码
attr	获取 $("#h").attr("align") 获取节点的align属性	示例代码
attr(属性,值)	修改	示例代码
removeAttr	删除	示例代码
prop与attr	prop与attr的区别	示例代码

 

prop与一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
 attr 只能获取初始值， 无论是否变化
 prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

 

Jquery 效果

 

关键字	简介	示例代码
show hide toggle	显示 隐藏 切换	示例代码
slideUp slideDown slideToggle	向上滑动 向下滑动 滑动切换	示例代码
fadeIn fadeOut fadeToggle fadeTo	淡入 淡出 淡入淡出切换 指定淡入程度	示例代码
animate	自定义动画效果 $(function(){ 示例代码DEMO var div = $("#d"); $("#b1").click(function(){ div.animate({left:'100px'},2000); div.animate({left:'0px',top:'50px',height:'50px'},2000); }); });	示例代码
callback	回调函数 $("#b6").click(function(){ div.slideToggle(2000,function(){ alert("回调函数"); }); });	示例代码

函数 Jquery封装JavaScript

		窗体顶端 窗体底端
关键字		简介	示例代码
$(document).ready() $() load()		加载   图片加载用load()	示例代码
click() dblclick()		单击 双击	示例代码
keydown() keypress() keyup		键盘按下 细分很多用时查就行 键盘弹起	示例代码
mousedown() mouseup() mousemove() mouseenter() mouseover() mouseout() mouseleave()		鼠标按下 鼠标弹起 进入后每 移动一下都算 进入调用一次,移动不算 经过子元素不调用 进入调用一次,移动不算 经过子元素也算调用 鼠标离开当鼠标经过其子元素不会被调用 鼠标离开当鼠标经过其子元素会被调用	示例代码
focus() blur()		获取焦点$("input").focus(function(){}); 失去焦点	示例代码
change()		改变	示例代码
submit()		提交	示例代码
on()		绑定事件 $("#b").on("click",function(){});	示例代码
trigger()		触发事件 自动触发事件 $("#b").trigger("dblclick");	示例代码
JQuery也有对AJAX的支持，使得其对AJAX的操作简化了很多。
关键字	简介		示例代码
$.ajax()	提交AJAX请求		示例代码
$.get()	使用get方式提交ajax		示例代码
$.post	使用post方式提交ajax		示例代码
load()	最简单的调用ajax的方式 var value = $(this).val(); var page = "/study/checkName.jsp?name="+value; $("#checkResult").load(page);		示例代码
serialize()	格式化form下的输入数据 var data = $("#form").serialize(); 格式化为 age=XX&name=XX		示例代码

对数组的封装

	窗体顶端 窗体底端
关键字	简介	示例代码
$.each()	遍历	示例代码
var a = new Array(1,2,3); $.each( a, function(i, n){   document.write( "元素[" + i + "] : " + n + "<br>" ); }) 元素[0] : 1 元素[1] : 2 元素[2] : 3
$.unique()	去除重复 a.sort(); $.unique(a);	示例代码
$.inArray()	是否存在$.inArray $.inArray(9,a) 没有返回-1	示例代码

 

 

学习到这里已经使用了大量的JQuery对象的方法，比如show() 、toggle()等等，这些方法都是属于JQuery对象的，而原生的DOM对象不具备这些方法。  同样的DOM对象也具备JQuery对象所没有的属性和方法，比如checked属性。  在某些场景下，需要对JQuery对象和DOM节点对象进行互相转换		窗体顶端 窗体底端
关键字	简介	示例代码
get(0) [0]	JQuery转DOM	示例代码
$()	DOM转JQuery	示例代码