一周一话题之四（JavaScript、Dom、jQuery全面复习总结<jQuery篇>）

一、 初探Jquery

在BS系统开发中，Jquery的使用更加是少不了的，通过本文我们来复习一下Jquery的知识，达到温故而知新的目的。

1. 介绍

jQuery就是JavaScript语法写的一些函数类，内部仍然是调用JavaScript实现的，所以并不是代替JavaScript的。JavaScript能做什么，它就能做什么。

优势：解决了不同浏览器的兼容问题，体积小，支持链式编程、隐式迭代，插件丰富，开源免费。

回到导航

2. 基础

(1) jQuery顶级对象

jQuery中最常用的对象即$对象，在代码中可以使用jQuery代替$，一般都用$简化写法。

(2) jQuery对象与Dom对象

只有将Dom对象转化为jQuery对象，才能调用jQuery中的各种方法。文档树中的对象都是Dom对象，对Dom对象进行包装就获得jQuery对象。

① dom对象转换为 jQuery 对象

dom对象只能操作dom对象中有的成员，比如value、type、onclick等

想要通过jquery方式操作页面元素，就必须将dom对戏那个转换为 jQuery 对象，转换方式$(dom对象)

当把dom对象转化为jquery对象后，就不能用dom的成员了，此时想再用dom对象方式操作，则必须将jQuery对象转换为dom对象

② jQuery对象转换为Dom对象

var dom对象 = jQuery对象[0] （推荐）

var dom对象 = jQuery.get(0)

(3) each与map函数

① map(array,callback) 传入一个数组，在callback函数中处理并返回一个新数组

$map(datas,function(val,index){

})

function传递的函数有两个参数，第一个参数表示遍历的元素的值，第二个参数表示元素的索引

--遍历一个数组对象，然后可以获取它的值和索引；函数的每一个返回值经处理后都将放入一个新数组中

var arr = [1, 3, 5, 7, 9];       
        var newarr = $.map(arr, function (arri, i, arg) {
            if (arri < arg) {
                return arri * 2;
            }
            else {
                return arri ;
            }
        }, 7);

② each

用each来遍历普通数组和键值对集合，对数组arry每个元素调用fn函数进行处理，没有返回值。

fn函数有两个参数：key,value。对于普通数组key就是索引。可以直接在fn中使用this

一般都是对数据的遍历。【除非key、value中，value是引用类型否则不能修改数组，修改请用$.map()方法。】

普通数组推荐用无参，用dict风格的就用key、value。

跳出循环：return false（jquery内部调用了break）

对于循环是普通数组，可用this代替数组中的值

$.each(arr, function (key, value) {
            alert("key:" + key + "   ---  value:" + value);
            if (key == "age") {
                return false;
            }
        });

二、 Jquery操作

1. jQuery页面加载

jQuery中的$(function(){})、$(document).ready(function(){})，可实现window.onload的页面加载完毕

区别：

window.onload需要等待页面完全加载完毕才会触发，即所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样可以提高响应速度。

$(document).ready() 可以多次注册事件处理程序，并且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。

回到导航

2. 选择器

(1) 一般选择器

->标签选择器 -- $(‘p‘)

->id选择器  -- $(‘#idName‘)

->类选择器  -- $(‘.className‘)

->组合选择器 -- $(‘#btn,#p1‘)

->标签+类选择器 -- $(‘p.className‘)

(2) 层次选择器

->所有子元素 -- $(‘div p‘)

->直接子元素 -- $(‘div > p‘)

->相邻的元素 

当前元素后面所有指定的兄弟 -- $(‘div ~ p‘)     等价于$(‘div‘).nextAll(‘p‘)

当前元素后面所有的兄弟  -- $(‘div ~ *‘)      

当前元素后面紧挨的第一个指定兄弟 -- $(‘div + p‘)  等价于$(‘div‘).next(‘p‘)

当前元素前面所有指定的兄弟 -- $(‘div‘).prevAll(‘p‘)

当前元素前面紧挨的指定兄弟 -- $(‘div‘).prev(‘p‘)

当前元素的所有兄弟元素 -- siblings()

(3) 过滤器

① 基本过滤器 ：

->选取第一个元素  -- :first 或者 .first()

->选取最后一个元素  -- :last 或者 .last()

->根据索引来选取元素

       等于索引 -- :eq(index)

       小于索引 -- :lt(index)

       大于索引 -- :gt(index)

->选取所有偶数个元素 -- :even

->选取所有奇数个元素 -- :odd

->选取对象，然后从中剔除相应元素 -- :not(selector)

->选取所有的h1...h6元素—:header

② 属性过滤器

jQuery没有对getElementsByName获取对象进行封装

->选取有id属性的div元素 -- $(‘div[id]‘)

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

->属性取非 --  $("div[title!=test]")

->选择开头 -- [name^=值]

->选择结束 -- [name$=值]

->复合属性 -- $([属性A=a][属性B=b]...)

③ 表单选择器与过滤器

选择器

$(":input")                   选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text")                     选择所有的text input元素

$(":password")           选择所有的password input元素

$(":radio")                   选择所有的radio input元素

$(":checkbox")           选择所有的checkbox input元素

$(":submit")                选择所有的submit input元素

$(":image")                 选择所有的image input元素

$(":reset")                   选择所有的reset input元素

$(":button")                选择所有的button input元素

$(":file")                       选择所有的file input元素

$(":hidden")                选择所有类型为hidden的input元素或表单的隐藏域

过滤器

$(":enabled")              选择所有的可操作的表单元素

$(":disabled")             选择所有的不可操作的表单元素

$(":checked")             选择所有的被checked的表单元素

$("select option:selected") 选择所有的select 的子元素中被selected的元素

④ 可见性过滤器

->选取所有不可见元素 -- :hidden

    表单元素type="hidden"

    设置样式display:none

    设置样式宽高为0：width:0；height:0

    父元素隐藏，子元素也是隐藏的

->选取所有可见元素 -- :visable

⑤ 内容过滤

->过滤出包含给定文本的元素。(innerText中包含) -- :contains(text)

->过滤出所有不包含子元素或者文本的空元素  -- :empty

->过滤出元素中包含（即子元素中）selector选择器能选择到的元素 -- :has(selector)

->过滤出可以当做父元素的元素（即该元素有子元素或者元素中包含文本。） -- :parent

回到导航

3. 操作Dom

(1) text、html、val、attr（传参是设置值，不传参就是获取值）

text和html相当于dom中的innerText和innerHTML

val()读取或设置value的值

attr()读取或设置元素的属性；removeAttr删除属性

(2) 创建Dom节点

$(html字符串)来创建节点，返回一个jQuery对象

①append方法用来在元素的末尾追加元素（最后一个子节点）

   appendTo(jQuery父节点)，创建好的jQuery对象可以主动添加到指定节点下

②prepend，在元素的开始添加元素（第一个子节点）

   prependTo(jQuery父节点)，创建好的jQuery对象可以主动添加到指定开始的元素

③after，在元素之后添加元素（添加兄弟）
           before：在元素之前添加元素（添加兄弟）

(3) 删除节点

①empty()清空某元素下的所有子节点

②remove(selector)删除当前元素，返回值为被删除的元素，还可以使用被使用被删除的节点进行操作

(4) 操作节点

① 替换节点

$("br").replaceWith("<hr/>")

用<hr/>替换br

$(‘<br/>’).replaceAll(‘hr’); //调用者也得是选择器选择到的元素。

用<br/>元素替换所有的hr

② 包裹节点

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

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

结果：<font color=‘red’><b></b></font>

wrapInner() //在内部围绕

4.  jQuery操作样式

增加类样式：addClass()

移除类样式：removeClass()

判断是否有指定的类样式：hasClass()

切换类样式：toggleClass()

三、 Jquery进阶

1. 隐式迭代与链式编程

(1)隐式迭代

jQuery操作获取的对象后，设置其属性就会隐式遍历获得的每一个对象

this在事件中，this还是表示触发事件的dom对象元素，并不是jQuery对象

(2)链式编程

text()、html()、val()这些方法用来设置值的时候可以进行链式编程，而获取值时破坏了链式编程

end()函数返回到最近一个“破坏性”操作之前。

注：一定要注意链式编程什么时候破坏了“链”

回到导航

2. RadioButton操作

(1) 取值

取得RadioButton的选中值，被选中的radio只有一个值，所以直接用val()

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

(2) 设置值

$("input[name=gender]").val(["女"]);或者$(":radio[name=gender]").val(["女"]);

注：val中参数的[]不能省略,val()的参数必须是一个数组，以上RadioButton的操作对于CheckBox和Select列表框同样适用。

回到导航

3. 事件

(1) 事件绑定

$("#btn").bind("click",function(){})太麻烦，一般都用简写方法：$("#btn").click(function(){}),jQuery的事件名称与JavaScript的事件类似，只是命名没有了on。

(2) 合成事件

hover(entern,leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。

相当于mouseover与mouseout事件的结合

<div id="tips">神秘的超链接</div>
<script type="text/javascript">
    $("#tips").hide();
    $("#linkCS").hover(function() {
        $("#tips").show();
    }
    , function() {
        $("#tips").hide();
    });
</script>

(3) 冒泡事件

与JavaScript的冒泡事件类似，调用事件对象的stopPropagation()方法终止冒泡

$("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });

回到导航

4. 动画

->显示 -- show()、隐藏 -- hide()、切换 -- toggle()

->淡入 -- fadeIn()、淡出 -- fadeOut()、切换 – fadeToggle()  (只改变透明度)

$(function(){
            $("#panel h5.head").toggle(function () { $(this).next("div.content").fadeOut();},
                functio(){$(this).next("div.content").fadeIn()});
        });

->滑动显示 -- slideDown()、滑动收起 -- slideUp()、切换 -- slideToggle()  (只改变高度)

$(function(){
            $("#panel h5.head").toggle(function () { $(this).next("div.content").slideUp();},
                functio(){$(this).next("div.content").slideDown()});
        });

->自定义动画 -- .animate({样式},speed)

注：部分样式如background-color、boder-color等不能设置动画效果

->停止动画 -- $(‘:animated‘).stop()  

stop()如果传递参数ture，则停止队列中所有动画；不带参数则停止当前动画；

第二个参数如果为true，表示停止当前正在执行的动画，并将元素设置为当前动画执行结束

回到导航

5. jQuery 插件

(1) jQuery Cookie

Cookie就是保存在浏览器上的内容，用户在这次浏览页面的时候向Cookie中保存文本内容，下次再访问页面的时候就可以取出来上次保存的内容，这样就可以得到上次“记忆”的内容。Cookie不是jQuery特有的概念，只不过jQueryCookie把它简化的更好用而已。Cookie就是存储在浏览器里的一些数据。

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

1、添加对jQuery.cookie.js引用

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

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

alert($.cookie("用户名"));

$.cookie("用户名","tom");在同域名的另外一个页面中也能读取到

设置值的时候还可以指定第三个参数，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true })，expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。可以实现“勾选【记录我的用户名10天】”的功能。如果不设定expires在浏览器关闭以后就清除，options参数用哪个设置哪个。 secure：传输cookies时候，是否需要一个安全协议。

var oldusername = $.cookie("username");
        if (oldusername) {
            $("#username").val(oldusername);
        }
        $("#btnLogin").click(function() {
            $.cookie("username", $("#username").val());
        });

(2) 基于jQuery的插件比如jqzoom、jQueryui、validate等等

扩展资源：《jQuery插件库》

回到导航

6. Ajax

(1) jQuery.ajax(url,[settings])

url:一个用来包含发送请求的URL字符串。

settings:AJAX 请求设置。所有选项都是可选的。

(2) jQuery.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.get("test.ashx", { name: "John", time: "2pm" }, function(data){ 
    alert("Data Loaded: " + data); 
  });

(3)  jQuery.getJSON(url, [data], [callback])通过 HTTP GET 请求载入 JSON 数据。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

$.getJSON("test.ashx", { name: "John", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

(4) jQuery.post(url, [data], [callback], [type])

通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

url:发送请求地址。

data:待发送 Key/value 参数。

callback:发送成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post("test.ashx", { "func": "getNameAndTime" },function(data){
     alert(data.name);
   }, "json");

四、 Jquery练习

(1) 设置某个div中显示的内容，通过Id选择器

(2) 为某个按钮注册单击事件，单击的时候设置页面上所有的p标签中显示文字为“我们都是P”。//隐式迭代

(3) 页面上有一个ul球队列表当鼠标移动到某个li上的时候改行背景颜色变红，当点击某个li的时候，让该li之前的所有li背景色变黄，之后的所有li背景色变蓝。自己不变色。

(4) 评分控件普通变色版、评分控件图片版

(5) 第一行是表头，所以显示大字体（fontSize=30px），最后一行是汇总，所以显示红色字体。正文的前三行是前三名，所以显示傻大的字体（28）表格的偶数行是红色色背景。

(6)

(7) 点击按钮，表格隔行变色。奇红，偶黄。

(8) 列表中的前三名粗体显示。（前三个li）font-weight:bolder

(9) 表格点击(鼠标over事件)行背景色变黄，其他行背景色变白。

(10) 十秒钟后协议文本框下的注册按钮才能点击，时钟倒数。

(11) 加法计算器。两个文本框中输入数字，点击【=】按钮将相加的结果放到第三个文本框中

(12) 创建三个输入文本框，当光标离开文本框的时候如果文本框为空，则将文本框背景色设置为红色，如果不为空则为白色

(13) 选择球队,两个ul。被悬浮行高亮显示（背景是红色），点击球队将它放到另一个的球队列表

(14) 表格操作

(15) 搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”，那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值，那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）

(16) 权限选择框

(17) CheckBox的全选、全不选、反选

(18) 跟着鼠标走的图片

(19) Tooltips效果。用层来做，背景色是黄色。当鼠标移动到页面上的某个元素时，在旁边显示当前元素的Id.

(20) 女图片详细解析层

(21) 右下角弹出QQ消息的效果

(22) 微博案例

试题答案择日公布

注： 各位园友，如果本文对你还算有些帮助的话，就帮忙右下角推荐一下！