摘自：http://www.cnblogs.com/sp53032104/archive/2012/11/19/jquery.html
jquery: javascript语法编写的函数,内部仍然调用javascript实现
页面调用方式:
1.引入jquery.js
<script src="${pageContext.request.contextPath}/js/jquery-1.7.1.js"></script>
2.在<script>标签中进行逻辑处理
<script type="text/javascript">
$(function(){
});
</script>
ready函数:$(document).ready(function(){}); 简写方式:$(function(){});
jquery内置函数:
$.map(array,fn):对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组.
$(function(){
var arr = [1,3,5,7,9];
var arr2 = $.map(arr,function(item){return item*2;});
alert(arr2);
});
$.map不能处理dictionary风格的数组.
$.each(array,fn):对数组array每个函数调用fn函数进行处理,没有返回值.
$(function(){
var arr = {"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"};
$.each(arr,function(key,value){
alert(key+":"+value);
});
});
如果是普通风格的数组,则key的值是序号.
还可以省略function函数,这时候用this可以得到遍历的当前元素:$.each(arr,function(){alert(this)});
jquery对象:通过jquery包装dom对象后产生的对象
$("#div").html()等价于:document.getElementById("div").innerHTML;
$("#div").text()等价于:document.getElementById("div").innerText;
将dom对象转换为jquery对象:$(domObj);
将jquery对象转换为dom对象:jqueryObj[0]||jqueryObj.get(0)
jquery样式:
样式赋值:$("#div").css("background","red");
样式取值:$("#div").css("background");
以及:$("#div").val();$("#div").attr();
$("#div").attr():设置和读取jquery未封装的属性
$("#a").attr("href","www.baidu.com")
使用removeAttr删除属性,删除的属性在原代码中看不到
jquery选择器:
$("#控件ID"):根据ID获取控件的jquery对象
$("TagName"):根据标签名获取指定标签名的jquery对象
$("body *"):选择body下的所有控件
css选择器:同事选择拥有样式的多个元素:
$(".myClass")
多条件选择器:
$("p,div,span.menuitem"):同时选择p标签,div标签和拥有menuitem样式的span标签元素
注意:选择器中的空格不能多不能少
层次选择器:
(1):$("div li"):获取div下的所有li元素(后代,子,子的子)
(2):$("div>li"):获取div下的直接li子元素
(3):$(".menuitem+div")获取样式名为menuitem之后的第一个div元素
(3):$(".menuitem~div")获取样式名为menuitem之后的所有的div元素
jquery隐式迭代:
$(function(){
$("#bt").mouseover(function(){
alert("鼠标上移事件");
});
});
jquery节点遍历:
next()方法用于获取节点之后的第一个同辈元素.
nextAll()方法用于获取节点之后的所有同辈元素.
siblings()方法用于获取所有同辈元素
jquery链式编程:
$(this).css("background","red").siblings().css("background","white");
jquery基本过滤选择器:
:first 选取第一个元素 $("div:first")
:last 选取最后一个元素 $("div:last")
:not 选取不满足"选择器"条件的元素 $("input:not(.myClass)")选取样式名不是myClass的<input>
:even, :odd 选取索引是奇数, 偶数的元素
:eq(索引序号), :gt(索引序号), :lt(索引序号)选取索引等于,大于,小于索引序号的元素$("input:lt(1)")
$(":header") 选取所有的h1...h6的元素
$("div:animated") 选取挣扎执行动画的<div>元素
属性过滤选择器:
$("div[id]") 选取有id属性的<div>
$("div[title=test]") 选取title属性为"test"的<div>
$("div[title!=test]") 选取title属性不为"test"的<div>
表单对象选择器:
$("#form1:enabled") 选取ID为form1的表单内所有启用的元素
$("#form1:disabled")选取ID为form1的表单内所有禁用的元素
$("input:checked") 选取所有选中的元素(Radio,CheckBox)
$("select:selected")选取所有选中的选项元素
表单选择器:
$(":input") 选取所有<input>,<textarea>,<select>,<button>元素
$(":text") 选取所有单行文本框
$(":password") 选取所有密码框.同理还有 :radio,:checkbox,:submit,:image,:reset,:button,:file,:hidden
元素的each:
$(function(){
$("input[name=names]").click(function(){
var names = $("input[name=names]:checked");
var arr = new Array();
names.each(function(key,value){
arr[key]=$(value).val();
});
$("#msgNames").text("共选中"+names.length+"条:"+arr.join(","));
});
});
<input type="checkbox" name="names" value="tom"/>tom
<input type="checkbox" name="names" value="jim"/>jim
<input type="checkbox" name="names" value="lily"/>lily
<p id="msgNames"></p>
动态创建dom节点:
使用$("html字符串")来创建dom节点,并且返回一个jquery对象,然后调用append等方法将创建的节点添加到dom中
var link = $("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
$()创建的就是一个jquery对象,可以完全进行操作
var link = $("<a href='http://www.baidu.com'>百度</a>");
link.text("度娘");
$("div:first").append(link);
append方法用来在元素的末尾追加元素
appendTo方法用来把指定元素添加到某个元素中
prepend方法用来在元素的开始添加元素
after方法在元素之后添加元素(添加兄弟)
before方法在元素之前添加元素(添加兄弟)
remove()删除选择的节点
remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点,比如重新添加到其他节点下
var list = $("#ulSite li").remove();
$("ulSite2 li").append(list);
empty()是将节点清空
替换节点:replaceWith()
$("br").replaceWith("<hr/>"); 将<br/>替换为<hr/>
包裹节点:wrap()
$("b").wrap("<font color='red'></font>") 将所有粗体字红色显示
字符串转换成数字类型:var a = parseInt("123");或者var a = parseInt("123",10);第二个参数代表10进制
样式设置:(同时使用多个样式,空格隔开即可<div class="class1 class2"></div>)
获取样式attr("class")
设置样式attr("class","myClass")
追加样式addClass("myClass")
移除样式removeClass("myClass")
切换样式(如果存在样式则去掉样式,如果不存在样式则添加样式)toggleClass("myClass")
判断是否存在样式hasClass("myClass")
body{filter:gray;}:该样式可以让网页变为黑白显示
input{font-size:30px;}:页面中<input>标签使用该样式
radio操作:
取得radio的选中值:
$("input[name=sex]:checked").val();
<input type="radio" name="sex" value="男"/>男<br/>
<input type="radio" name="sex" value="女"/>女
设置radio的选中值:
$("input[name=sex]").val(["女"]); 或者 $(":radio[name=sex]").val(["女"])
注意:val()中的参数的[]不能省略
jquery事件:
click事件完整写法:$("#id").bind("click",function(){})
hover(enterfn,leavefn):封装了mouseenter()和mouseleave()
$("p").hover(function(){$(this).text("客观来了...");},function(){$(this).text("大爷慢走...");});
阻止事件冒泡:e.stopPropagation()
在匿名函数中加入参数e,执行e.stopPropagation()阻止冒泡
$("#td").click(function(e){alert("td被点击了"),e.stopPropagation()});
阻止事件默认行为:e.preventDefault()
$("a").click(function(e){alert("超链接默认行为被阻止"),e.preventDefault()});