jquery篇

-->目录导航

一、 初探Jquery

    1. 介绍

    2. 基础

二、 Jquery操作

    1. jQuery页面加载

    2. 选择器

    3. 操作Dom

三、 Jquery进阶

    1. 隐式迭代与链式编程

    2. RadioButton操作

    3. 事件

    4. 动画

    5. jQuery 插件

    6. Ajax

四、 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) 微博案例