JQuery总结

最新推荐文章于 2022-10-24 11:31:38 发布

weixin_30429201

最新推荐文章于 2022-10-24 11:31:38 发布

阅读量81

点赞数

原文链接：http://www.cnblogs.com/pw1990/archive/2012/04/14/2446986.html

版权

选择器
常用的方法
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   as text for IE6
       label.html(" ").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  });