jquery

个人博客已经迁移到如下网站 萌萌的IT人, 后续所有的文章都会在此发布

 

 

----------------------------------------------------------------------------------

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