JQuery总结

选择器
常用的方法
jQuery插件

jquery文件  有智能提示版本(开发时用)、源码版本、压缩版本(发布时用)

★判断对象是否存在:if($("#d1").length>0){}


jQeury顶级对象 缩写$ 
$() 里面可以拼字符串

1、$(document).ready(function(){
 
})

  缩写
  $(function(){
  })
dom加载完成后触发,比onload提前执行
window.onload
 只能注册一个方法,如果注册多个方法,最后一次会把之前的 覆盖
 页面所有内容加载完成后触发(图片,css,js都加载)

 
2、jQuery对象(包装集)  dom对象
 var txt= document.getElementById("id") dom对象
 //dom对象-》jQuery对象
 var $txt=$(txt);
 $txt.val("123");//这样就可以使用jquery对象的属性和方法
 
 var $txt = $("#id") jQuery对象,包装集,对dom对象包装,返回的是很多个dom对象
 //jQuery对象-》dom对象
 var txt = $txt[0];//var txt=$txt.get(0);
 txt.value="123";//这样就可以使用dom对象的方法和属性了

3、each 函数(处理字典)
 $.each(array,fn)对数组arry每个元素调用fn函数进行处理, 没有返回值。猜猜内部实现。
 var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": " 莉莉" };
 $.each(arr, function(key, value) { alert(key +"="+value); });

 
   map 函数 (只能对数组进行操作,并返回新的数组)
 $.map()

4、jQeury选择器
一般选择器:
 $("#id")
 $(".class")
 $("input")
复合选择器 $("#id,.class,input")
 *
5、$(who).when(what)  $("#btn").click(function(){})

6、层次选择器
 $("div p") 包含选择器 div中所有的p 子元素 子子元素..
 $("div > p")  子后代选择器 div中直接子后代

7、常用的方法html()
 text()  读取或设置标签之间的内容
 val() 读取或设置表单的值
 css() ()里面可以是json数据
 attr()  ★
 使用attr()方法获取或者设置元素的属性,对于JQuery没有封 装的属性(所有浏览器没有差异的属性)用attr进行操作。
        alert($(“#btn1").attr("href")); //获取href属性
        $("#btn1").attr("href", "http://www.rupeng.com");       
 removeAttr() 删除属性

 节点遍历的方法:
 prev() prevAll()  ()里可以加选择器进行约束
 next() nextAll()  都是兄弟节点(同一级别的)
 自己除外
 sibling() 兄弟姐妹节点(自己除外) 
 
 ★end() 返回最近一次对包装集的破坏之前的状态 
 ★andSelf()
 addClass()  
 removeClass() 
 toggleClass()

this是当前dom对象 要转换为jquery对象使用 $(this)

 

8、简单选择器(索引都是从0开始的)
 :first 选取第一个元素   $("div:first")
 :last 选取最后一个元素
 :not(选择器) 选取不满足“选择器”条件的元素$("div:not(#id)")
 :even、:odd,选取索引是奇数、偶数的元素
 :eq(索引序号)、:gt(索引序号)、:lt(索引序号)
 不仅可以使用选择器进行进行绝对定位,还可以进行相对定位 ,只要在$()指定第二个参数,第二个参数为相对的元素.  $("ul", $(this)).css("background", "red");

 

9、设置样式(一般使用类样式设置style时使用)
 css()  设置行内样式  设置标签的style属性
 attr("class","c1")  对class属性赋值  设置标签的所有属性
 addClass("myclass")(不影响其他样式) 
 removeClass("myclass")移除样式
 toggleClass("myclass")如果存在样式则去掉样式,如果没有样式则添加样式
 hasClass("myclass")判断是否存在样式
10、链式编程
 $(this).css("background-color", "red").siblings().css("background-color", "white");

---------------------------
11、属性过滤选择器
 $("div[id]")选取有id属性
 $("div[title=test]")选取title属性为test的元素
 $("div[title!=test]")选取title属性不为test的元素
 etc....查看帮助
 

12、表单选择器
 $(":input")匹配所有 input, textarea, select 和 button 元素
 $(":text")匹配所有 匹配所有的单行文本框
 $(":checkbox")匹配所有复选框
 $(":password")选取所有密码框。同理还 有:radio、:checkbox、:submit、:image、:reset、:button 、:file、:hidden。
 etc.....查看帮助

12.1表单对象选择器
 $(":checkbox:checked")
 $("select option:selected") 下拉列框
 $("input:disabled")
 $("input:enabled")

13、动态创建Dom
 var link = $("<a href='http://www.baidu.com'>百度</a>");动态创建jquery对象,只是在内存中
 $("div:first").append(link);  把动态创建的jquery对象,加到第一个div中
 
 (★)动态创建dom注意:
  var some = $("<div id='d1'>a<p></p>c</div>")
  当把动态创建的节点添加到窗体前,不能通过$("#d1")访问到它
  必须先把some追加到窗体
  $("div:first").append(some);
  才可以通过$("#d1") 中找到它

 (★)不仅可以使用选择器进行进行绝对定位,还可以进行相对定位 ,只要在$()指定第二个参数,第二个参数为相对的元素.  $("ul", $(this)).css("background", "red");
 给动态生成的控件的子控件注册事件 需要用到this


 append   把link元素追加到哪$("div:first").append(link); 
 appendTo  link.appendTo("div:first") 
  在结束标签之前添加元素
 prepend
 prependTo
  在开始标签之后添加元素
 after
 
  在结束标签外添加元素
 before
 
  在开始标签前添加元素

14、删除节点
 remove()  删除当前节点(标签)  删除的对象还在内存中
 empty() 清空当前节点之间的内容,节点保留 会把对象的事件移除


设置RadioButton的选中值:
$("input[name=gender]").val(["女"]);
或者
$(":radio[name=gender]").val(["女"]);

----------------------
15、绑定事件
 绑定事件 $("#id").bind("click",function(){})
绑定多个事件:       
 $(":button[value=bind]").bind({
 "click": function () { alert("click"); },
 "mouseover": function () { alert("mouseover"); }
            })


 解除绑定 $("#id").unbind("click")
 让事件只执行一次 $("#id").one("click",function(){})
 合成事件hover  toggle
  (★)hover(enterfn,leavefn)  当鼠标放上时执行enterfn,当鼠标离开时执行leavefn(内部封装了mouseover 和 mousout)
  toggle(fn1,fn2) 当鼠标第一次点击时执行fn1,第二次点击执行fn2,以后依次执行


16、事件冒泡
 mouseover、mouseenter   mouseover会事件冒泡,mouseenter不会
 mouseout、mouseleave
 
 阻止事件冒泡(★)   )
 $("#d1").click(function(e){ e.stopPropagation();})

阻止默认行为:有的元素有默认行为,比如超链接点击后会转向新链接、提交按钮默认会提交表单,如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。
 $("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); });
(return false 只是在事件响应函数中使用)

17、*事件参数(都通过e参数传过来)
 pageX、pageY 设置坐标位置
 eg: $div.css("top",e.pageX);
 target 获得触发事件的元素(冒泡的起始,和this不一样)
 altKey、shiftKey、ctrlKey
 keyCode 键盘码、charCode  ascii码
 which如果是鼠标事件获得按键(1左键,2中键,3右键)。


18、动画(★)
 show()、hide()   ()里可带设置速度的参数
 toggle()  切换显示/隐藏
 slideDown、slideUp、 fadeOut、fadeIn、slideToggle
 animate 复杂动画
 animate:anmite内部设置的多个值是同步变化的,链式的animate是依次动画的。
例子:animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。
还可以指定增量,$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串,因为JavaScript不认识这种语法

先调用非动态的 在执行动态的(解决方案:使用callback)

19、插件

使用JQueryUI
1、引用jquery的css(注意不要忘了image文件夹)
2、引用jquery.js,引用jqueryui.js(如果想减小尺寸,可以引用单独的每个插件的js)
3、查看文档,根据说明使用,一般就是在ready里面加一句类似于$("#aa").draggle();
“development-bundle\demos”是例子,development-bundle\docs是每个控件的详细用法。


jQuery validate:

1、 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="../js/jquery.validate.js" type="text/javascript"></script>
2、设置元素的class="required" minlength等属性  加name属性
3、窗体加载时候调用$("#f1").validate();
4、提示内容显示为中文messages_cn.js 在开发包的localization文件夹下
  <script src="../js/messages_cn.js" type="text/javascript"></script>
5、自定义出错样式和成功样式

自定义出错样式和成功样式
 //提示出错文本样式
  label.error       
         {           
          background: url(../images/access_disallow.gif) no-repeat 0px 0px;          
          color: Red;           
          padding-left: 20px;
         }
  //提示成功样式
         label.checked
         {
          background: url(../images/access_allow.gif) no-repeat 0px 0px;
                
         }  
  //出错控件样式
         input.error       
         {           
          border: dashed 1px red;       
         }
  当验证成功后,给当前提示label加上提示成功样式
  
  $("#f1").validate({
   success: function(label) {
       // set &nbsp; as text for IE6
       label.html("&nbsp;").addClass("checked");
   }
            });
6、自定义提示内容

View Code
 1  $("#signupForm").validate({
 2   rules: {
 3    firstname: "required",
 4    lastname: "required",
 5    username: {
 6     required: true,
 7     minlength: 2
 8    },
 9    password: {
10     required: true,
11     minlength: 5
12    },
13    confirm_password: {
14     required: true,
15     minlength: 5,
16     equalTo: "#password"
17    },
18    email: {
19     required: true,
20     email: true
21    },
22    agree: "required"
23   },
24   messages: {
25    firstname: "Please enter your firstname",
26    lastname: "Please enter your lastname",
27    username: {
28     required: "Please enter a username",
29     minlength: "Your username must consist of at least 2 characters"
30    },
31    password: {
32     required: "Please provide a password",
33     minlength: "Your password must be at least 5 characters long"
34    },
35    confirm_password: {
36     required: "Please provide a password",
37     minlength: "Your password must be at least 5 characters long",
38     equalTo: "Please enter the same password as above"
39    },
40    email: "Please enter a valid email address",
41    agree: "Please accept our policy"
42   }
43  });

 jquery cookie的使用:
1、添加对jquery.cookie.js
2、设置值,$.cookie('名字', '值')。cookie中保存的值都是文本。
3、读取值,var v=$.cookie('名字')

 

 

 

 

 

 

 

 

 

 


 

posted @ 2012-04-14 12:51  铭x  阅读(327)  评论(0编辑  收藏  举报