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()});