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 | 最先最后 | ||
:odd | 奇偶 | ||
:hidden | 可见性 $("div:visible").hide(); $("div:hidden").show(); | ||
[attribute] | 属性 $("div[id]"). 有ID属性的 $("div[id='pink']") id=pink的
$("div[id^='p']"). id以p开头的 $("div[id$='k']"). id 以k结尾的 $("div[id*='ee']"). id包含ee的 | ||
:input | 表单对象 | ||
:enabled | 表单对象属性 | ||
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() | 第一个 最后一个 第几个 $("div").last() $("div").eq(4). 第四个 | |
parent() | 父 祖先(包括父亲和其他的所有) | |
children() | 儿子 后代(包括儿子和其他的所有) | |
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 | 显示 隐藏 切换 | |
slideUp | 向上滑动 向下滑动 滑动切换 | |
fadeIn | 淡入 淡出 淡入淡出切换 指定淡入程度 | |
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() | |||
click() | 单击 双击 | |||
keydown() | 键盘按下 细分很多用时查就行 键盘弹起 | |||
mousedown() mouseover() mouseout() | 鼠标按下 鼠标弹起 进入后每 移动一下都算 进入调用一次,移动不算 经过子元素不调用 进入调用一次,移动不算 经过子元素也算调用 鼠标离开当鼠标经过其子元素不会被调用 鼠标离开当鼠标经过其子元素会被调用 | |||
focus() | 获取焦点$("input").focus(function(){}); 失去焦点 | |||
change() | 改变 | |||
submit() | 提交 | |||
on() | 绑定事件 $("#b").on("click",function(){}); | |||
trigger() | 触发事件 自动触发事件 $("#b").trigger("dblclick"); | |||
关键字 | 简介 | 示例代码 | ||
$.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 | |||
$.unique() | 去除重复 a.sort(); $.unique(a); | ||
$.inArray() | 是否存在$.inArray $.inArray(9,a) 没有返回-1 |