JQuery笔记

JQuery进行常见网页效果开发

JQuery是JavaScript的封装库，屏蔽浏览器差异，跨浏览器兼容性好。

 

注册事件函数

ready() 

和dom元素的onload事件类似，但onload只能注册一次(window.οnlοad=function(){…})

（没有C#中的+=机制）,后注册的取代先注册的，而ready则可以多次注册都会被执行。

 

JQuery的ready和Dom的onload的区别：

onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才触发，

而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度。

在JQuery中也可以用$(window).load()来实现onload事件调用机制。

 

JQuery提供的操作数组函数：

$.map(array,fn)

对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。$.map不能处理Dictionary风格的数组。

例子：得到一个元素值是原数组值二倍的新数组

var arr=[3,5,9];

var arr2=$.map(arr,function(item){return item*2;});

 

$.each(array,fn)

对数组array中每个元素调用fn函数进行处理，没有返回值。

例子：

var dict = {“tom”:”汤姆”,”jerry”:”杰瑞”,”lily”:”丽丽”};

$.each(arr,function(key,value){alert(key+”=”+value);});

如果是普通风格数组，则key的值是序号。

还可以省略function的参数，这时候用this可以得到遍历的当前元素：

var arr=[3,5,6];

$.each(arr,function(){alert(this);})   //this代表当前元素的value

$.each(arr,function(item){alert(item);});  //item代表当前元素的key(序号)

 

JQuery对象、Dom对象

JQuery对象就是通过JQuery包装Dom对象后产生的对象，

Dom对象要想通过JQuery进行操作，先要转换为JQuery对象。

$(dom对象)  ：Dom对象转换为JQuery对象

var domobj = jqobj[0] 或者 var domobj=jqobj.get(0)  ：JQuery对象转换为dom对象

$(‘#div1’).html()等价于：document.getElementById(“div1”).innerHTML;

 

$(“#div1”).css(“background”,”red”);  // JQuery修改样式

$(“#div1”).css(“background”);      //获得样式

 

$(“#un”).val(“abc”);       //修改value

$(“#un”).val();           //获得value

 

$(“#div1”).text(“abc”);   //修改innerText

$(“#div1”).text();       //获得innerText

 

$(“#div1”).html(“a<font color=’red’>b</font>c”);    //修改innerHTML

$(“#div1”).html ();     //获得innerHTML

 

JQuery选择器

用于查找满足条件的元素。

$(“#控件Id”) ：根据控件id获得控件的JQuery对象，相当于getElementById

$(“TagName”) ：获取所有指定标签名的JQuery对象，相当于getElementByTagName

 

css选择器

同时选择拥有样式的多个元素。

<style type=text/css>

       .test{background-color:Red}

</style>

<script type=”text/javascript”>

       $(function(){$(“.test”).click(function(){alert($(this).text());});})

</script>

<p class=”test”>test1</p>

<p class=”test”>test2</p>

<p class=”test”>test3</p>

 

多条件选择器

$(“p,div,span.menuitem”) ：同时选择p标签、div标签和拥有menuitem样式的span标签。

 

层次选择器

(1)    $(“div li”) 获取div下的所有li元素（包括子代）

(2)    $(“div > li”) 获取div下的直接li子元素

(3)    $(“.menuitem + div”) 获取样式名为menuitem之后的第一个div元素 (不常用)

(4)    $(“.menuitem ~ div”) 获取样式名为menuitem之后所有的div元素（不常用）

 

注意：选择器表达式中的空格不能多不能少。

 

JQuery迭代

如何判断对象是否存在？

JQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写：

if($(“#btn1”).length<=0){

       alert(“id为btn1的元素不存在！”);

}

 

节点遍历

next() ：用于获取节点之后的挨着的第一个同级的元素。

nextAll() ：用于获取节点之后的所有同级元素。

$(“.menuitem”).next(“div”) 获取样式名为menuitem之后的第一个同级div元素

$(“.menuitem”).nextAll(“div”) 获取样式名为menuitem之后的所有同级div元素

点击当前div之后的所有div都变红色

$(“div”).click(function(){$(this).nextAll(“div”).css(“background”,”red”);})

 

siblings()方法用于获取所有兄弟元素

$(“.menuitem”).siblings(“li”)

点击时当前div变红色，其他变白色

$(“div”).click(function(){$(this).css(“background”,”red”); $(this).siblings(“div”).css(“background”,”white”);})

 

链式编程

高亮选中项：给所有有menuitem这个样式的元素添加click监听事件，当click的时候，向被点击的元素添加highlight这个样式，然后从兄弟节点（siblings）中移除highlight风格。

<style type=”text/css”>

   .menuitem｛background-color:Yellow;｝

   .highlight｛background-color:Red;｝

</style>

$(function(){

     $(“.menuitem”).click(function(){

           $(this).addClass(“highlight”).siblings().removeClass(“hightligh0074”);

});

});

 

基本过滤选择器

:first选取第一个元素。 $(“div:first”)选取第一个<div>

:last选取最后一个元素。$(“div:last”)选取最后一个<div>

:not(选择器)选取不满足”选择器”条件的元素，$(“input:not(.myClass)”)选取样式名不是myClass的<input>

:even、 :odd,选取索引是奇数、偶数的元素。$(“input:even”)选取索引是奇数的<Input>

:eq（索引序号）、:gt（索引序号）、:lt（索引序号）选取索引等于、大于、小于索引序号的元素。$(“input:lt(1)”)选取索引小于1的<input>

$(“:header”)选取所有的h1…h6元素

$(“div:animated”)选取正在执行动画的<div>元素

 

 

属性过滤选择器

$(“div[id]”)选取有id属性的<div>

$(“div[title=test]”)选取title属性为“test”的<div>,JQuery中没有对getElementsByName进行封装，用$(“input[name=abc]”)

$(“div[title!=test]”)选取title属性不为”test”的<div>

表单对象选择器：

$(“#form1:enabled”)选取id为form1的表单内所有启动的元素

$(“#form1.disabled”)选取id为form1的表单内所有禁用的元素

$(“input:checked”)选取所有选中的元素（Radio、CheckBox）

$(“select:selected”)选取所有选中的选项元素（下拉列表）

 

不仅可以使用选择器进行绝对定位，还可以进行相对定位，

只要在$()指定第二个参数，第二个参数为相对的元素。

$(“ul”,$(this)).css(“background”,”red”);

 

表单选择器

$(“:input”)选取所有<input>、<textarea>、<select>和<button>元素。

和$(“input”)不一样，$(“input”)只获得<input>

$(“:text”)选取所有单行文本框。等价于 $(“input:[type=text]”)

$(“:password”)选取所有密码框。

同理还有  :radio、:checkbox、:submit、 :image、:reset、:button、:file、:hidden

 

 

JQuery的Dom操作

1.使用html()方法读取或设置元素的innerHTML

   alert($(“a:first”).html());

  $(“a:first”).html(“hello”);

2.使用text()方法读取或设置元素的innerText

  alert($(“a:first”).text());

  $(“a:first”).text(“hello”);

3.使用attr()方法读取或设置元素的属性，对于JQuery没有封装的属性用attr进行操作

  alert($(“a:first”).attr(“href”));

  $(“a:first”).attr(“href”,”http://www.baidu.com”);

4.使用removeAttr删除属性。注意和清空属性(值为空)的区别。

 

动态创建Dom节点

使用$(html字符串)来创建Dom节点，并且返回一个JQuery对象，然后调用append等方法将新创建的节点添加到Dom中。

 var link = $(“<a href=’http://www.baidu.com’>百度</a>”);

 $(“div:first”).append(link);  //显示出来

$()创建的就是一个JQuery对象，可以完全进行操作

 

append方法用来在元素的末尾追加元素。

prepend 在元素的开始添加元素。

after 在元素之后添加元素(添加兄弟)

before 在元素之前添加元素（添加兄弟）

 

删除节点

1.       remove()删除选择的节点

案例：删除ul下li中有testitem样式的元素。

 

remove方法的返回值是被删除的节点对象，还可以继续使用被删除的节点。比如重新添加到其他节点下：

var lis=$(“#ulId li”).remove();

$(“#ulId2”).append(lis);

 

2.       empty() 将节点清空

 

3.       替换节点

$(“br”).replaceWith(“<hr/>”); 将<br/>替换为<hr/>

4.       包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹：

$(“b”).wrap(“<font color=’red’></font>”)  将所有粗体字红色显示

 

样式操作

1.       获取样式attr(“class”)

2.       设置样式attr(“class”,”myclass”)

3.       追加样式addClass(“myclass”)

4.       移除样式removeClass(“myclass”)

5.       切换样式toggleClass(“myclass”) (如果存在样式则去掉样式，如果没有样式则添加样式)

6.       判断是否存在样式hasClass(“myclass”)

设置样式：

$(“#div1”).attr(“class”,”class1 class2”); 两个样式，中间用空格隔开

 

设置过滤器：

<style type=”text/css”>
       body{filter:Gray;}

     …

     .class1{filter:Gray;}

</style>

 

*选择器

$(“body *”) 取得body中所有控件

 

 

RadioButton操作

1.       取得RadioButton的选中值

$(“input[name=gender]:checked”).val()

2.       设置RadioButton的选中值

$(“input[name=gender]”).val([“女”]);

或

$(“:radio[name=gender]”).val([“女”]);

注意：val中参数的[]不能省略

$(“:checkbox”).val([“篮球”,”冰球”])

单独设置控件的选中状态，设定checked属性：

$(“:checkbox[value=羽毛球]”).attr(“checked”,true)

 

事件

合成事件hover, (鼠标进入、退出)

hover(enterfn,leavefn)

调用事件对象的stopPropagation()方法终止冒泡

如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。

调用事件对象的stopPropagation()方法终止冒泡。

$(“tr”).click(function(e){alert(“tr被点击”);e.stopPropagation();});//注意函数的参数是e

 

阻止默认行为：比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法

$(“a”).click(function(e){alert(“所有超链接暂时全部禁止点击”);e.preventDefault();});

 

发生事件时鼠标的位置：pageX、pageY

获得触发事件的元素：target

 

绑定事件：bind()

移除事件绑定：unbind(“click”)则只移除click事件的绑定。

(bind()相当于+= ;unbind()相当于-= ;)

 

一次性事件：one()

 

动画

show()、hide()方法会显示、隐藏元素。

toggle()方法在显示、隐藏之间切换

$(“:button[value=show]”).click(function(){$(“div”).show();})

$(“:button[value=hide]”).click(function(){$(“div”).hide();})

 

 

JQuery插件：

JQuery Cookie的使用

Cookie：就是保存在浏览器上的内容，

Cookie的几个特征：

1.Cookie是与域名相关的，所以163.com不能读取baidu.com记录的Cookie。

2.一个域名能写入的Cookie总尺寸是有限制的，一般是几千字节。

3.Cookie不是写入以后一定下次能读出来，浏览器可能会定期清除，用户也可能会手动清除。

使用方法：Cookie保存的是键值对

1、  添加对jquery.cookie.js的引用

2、  设置值，$.cookie(‘名字’,’值’).   Cookie中保存的值都是文本

3、  读取值，var v = $.cookie(‘名字’)

if($.cookie(“UserName”))

{     //读取上次记录的用户名

          $(“#username”).val($.cookie(“UserName”));

}

$(“#btnLogin”).click(function(){

          $.cookie(“UserName”,$(“#username”).val()); //用户填写的用户名保存到Cookie中

});