JQuery 学习进阶

12.JQuery过滤器

!属性过滤选择器:

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

$("div[title=test]")选取title属性为"test"的<div>, Jquery中没有对getElementsByName警醒封装,用$("div[title!=test]")选取title属性不为"test"的<div>

还可以选择开头,结束,包含等,条件还可以复合. (*)

!表单对象选择器(过滤器)

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

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

$("input:checked")选取所有选中的元素(Radio, CheckBox),没有空格

$("select:selected")选取所有选中的选项元素(下拉元素)

练习:使用checkbox , 使用each,

         <script type="text/javascript">
        $( function () {
            $( "input[name=names]").click(function () {
                var arr = new Array();
                $( "input:checked").each(function (key, value) { arr[key] = $(value).val(); });
                $( "#msgShow").text("一共选中" +arr.length+"项:"+arr.join( ','));
            });
        });
    </script>

<body>
    <form id="form1" runat="server">
    <div>
        <input type="checkbox" name="names" value="tom" />tom
        <input type="checkbox" name="names" value="lili" />lili
        <input type="checkbox" name="names" value="join" />join
    </div>
    <p id="msgShow"></p >
    </form>
</body>

13.表单选择器

$(":input")选取所有<input>,<textarea>,<select>和<button>元素, 和$("input")不一样,$("input")只获得<input>,前者获得所有提交的表单

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

$(":password")选取所有密码框.同理还有":radio, :checkbox, :submit,:image, :reset, :button, :file, :hidden

14.JQuery的Dom操作

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

alert($("a:first").html()); $("a:first").html("hello");

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

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

alert($("a:first").attr("href")); //显示第一个a标签的href值

$("a:first").attr("href","http://www.baidu.com ")

四.使用removeAttr删除属性,是删除,比如删除href,就是把href属性从标签里面移除

15.动态创建Dom节点

一.使用$(html字符串)创建Dom节点,返回jquery对象,在调用append方法创建新的节点添加到dom中

二.$()穿件的就是一个jquery对象,可以进行完全的操作

          var link = $("<a href='http://www.baidu.com'>百度</a>");
          link.text("白毒");
          link.attr("href","http://www.sina.com");
          $("div:first").append(link);

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

prepend, 元素的开始添加元素

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

before 在元素之前添加元素(添加兄弟)

四.删除选择的节点

案例 $("ul li.classFirst").remove(); 删除所有的ul下,样式为classFirst的节点

五.remove方法的返回值是被删除的节点对象,还可以继续使用被删除的节点.

六.empty清空,没有返回值的

练习: 1.动态生成网站列表, 实现无刷新分页

2.删除节点,使用remove()方法

3.选项框里面,进行移动

4.加法计算器,按=实现数字相加,求结果

5.15秒后协议文本的注册,时钟倒数(btn.disabled = true),文字也要现实

6.无刷新评论点击评论按钮动态增加一行 <li></li>

7.三个输入文本,光标离开文本框(文本框为空)设置背景色为红色,不为空显示白色. 提示:焦点进入控件的事件时onfocus,离开是onblur

8.超链接的单选效果,页面上若干个超链接, 点击一个超链接的时候被点击的超链接变红色背景,其他为白色背景.参考:点击呜呜,没点击 "哈哈" window.event.returnValue=false 难点"this"

-------------------练习1----------------------

     <script type="text/javascript">
        $( function () {
            var data1 = { "百度" : "http://www.baidu.com", "谷歌": "http://www.google.cn" };
            var data2 = { "搜狐" : "http://www.sohu.com", "新浪": "http://www.sina.com" };
            $( "#btnPre").click(function () {
                $( "#table1 tr:lt(2)").remove();
                $.each(data1, function (key, value) {
                    var tr = $("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>" );
                    $( "#table1").append(tr);
                });
            });
            $( "#btnNext").click(function () {
                $( "#table1 tr:lt(2)").remove();
                $.each(data2, function (key, value) {
                    var tr = $("<tr><td><a href='" + value + "'>" + key + "</a></td></tr>" );
                    $( "#table1").append(tr);
                });
            });
        });
    </script>

-------------------练习2----------------------

 $(function () { $( "#del").click(function () { $("#select1 option:selected").remove() }); });

-------------------练习3----------------------

$(function () { $( "#next").click(function () { $("#select2").append($( "#select1 option:selected" ).remove()); }); });

-------------------练习4----------------------

$(function () { $( "#calculate").click(function () { $("#result").val(parseInt($( "#first").val(), 10) + parseInt($("#second" ).val(), 10)); }); });

-------------------练习5----------------------

$(function () {
            $( "#register").attr("disabled" , true);
            var times = 5;
            var timeId = setInterval(function () {
                alert( "22222");
                if (times <= 0) {
                    $( "#register").attr("disabled" , false).val( "注册");
                    clearInterval(timeId);
                    return;
                }
                $( "#register").val("请仔细看一下协议,还剩" + times + "秒");
                times--;
            }, 1000);
        });

-------------------练习6----------------------

$(function () { $( "#submit").click(function () { $("ul:first").append($( "<li>"+$("#txt" ).text()+"</li>")); }); });

-------------------练习7----------------------

$(function () {
            $( ":text").blur(function () {
                var tt = $(this );
                if (tt.val() <= "" ) {
                    tt.css( "background", "red" );
                }
                else {
                    tt.css( "background", "white" );
                }
            });
        });

-------------------练习8----------------------

$(function () { $( "a").click(function () { $(this).css( "background", "red" ).siblings().css("background", "white") }); })

-------------------练习9球队选择---------------------

$(function () {
            $( "#ul1 li").css("cursor" ,"pointer").mouseover( function () {
                $( this).css("background" , "red").siblings().css( "background", "white" );
            }).click( function () {
                $( this).css("background" , "white").appendTo( "#ul2");
            });
          })

16.样式操作

获取样式 attr("class"), 设置样式attr("class","myclass"), 追加样式addClass("myclass"), 移除样式remove("myclass"), 切换样式(没有添加,有去除添加) toggleClass("myclass"), 判断是否存在样式 hasClass("myclass")

案例:网页开灯效果灰度过滤效果

     $(function () { $( "#btn").click(function () { $(document.body).toggleClass( "blackwhite") }) });
        $( function () { $("#kgd" ).click(function () { $(document.body).toggleClass( "kgd") }) });
     
     .blackwhite{ filter :Gray}
    .kgd{ background-color :Black}

练习: 搜索框效果焦点翻入空间 , 如果文本框中的值是请输入关键词,那么将文本清空,并且将颜色设置为黑色.如果焦点离开空间,如果文本框为空值,填入灰色的"请输入关键词"

代码:

      $(function () {
            $( "#txt").val("请输入关键词" ).focus(function () { //焦点进入文本框判断是否删除文本,切换样式
                if ($(this ).val() == "请输入关键词") {
                    $( this).val("" ).toggleClass("txtFull");
                }
            }).blur( function () { //焦点离开文本.空:写入默认值,切换样式; 非空:不操作
                if ($("#txt" ).val() == "") {
                    $( "#txt").val("请输入关键词" ).toggleClass("txtFull");
                }
            });
        });

17.节点操作

一.替换节点:

$("br").replaceWith("<hr/>"); //回车变成横线

二.包裹节点

$("p").wrap("<font color='red'></font>")

18.RadioButton操作

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

二.设置RadioButton的选中值

$(":radio[name=gender]").val(["女"])

案例: 性别选择

      $(function () {
            $( "#getValue").click(function () { //获得选中的radioButton的value
                alert($( ":radio[name=gender]:checked" ).val());
            });
            $( "#setValue").click(function () { //设置默认值,注意不要丢了[]
                $( ":radio[name=gender]").val(["女" ]);
                $( ":checkbox").val(["篮球" ,"网球"]);
            });
        });

19.RadioButton操作2

一.对RadioButton的选择技巧对于CheckBox和Select列表框也适用

二.除了可以使用val批量设置RadioButton,CheckBox等的选中以外,还可以设定checked属性来单独设置控件的选中状态

$("btn1").attr("checked","true")

练习: checkBox的全选, 全不选, 反选

          $( "#btnAll").click(function () { $(":checkbox").attr( "checked", true ); }); //全选
            $( "#btnNon").click(function () { $(":checkbox").attr( "checked", false ); }); //全不选
            $( "#btnOps").click(function () { $(":checkbox").each( function () { $(this ).attr("checked", !$(this).attr("checked" )); }); }); //反选

20.事件

一.JQuery事件绑定: $("#btn").bind("click",function(){ }), 每次调用比较麻烦, 简化$("#btn").click(function(){ })

二.鼠标进入, 离开事件

$(*).mouseenter(fn1).mouselease(fn2) == $(*).hover(fn1,fn2)

三.事件冒泡 JQuery和Javascript同样有事件冒泡比如: 点击里层的标签,依次激发外层标签的点击事件

四.阻止冒泡 e.stopPropagation()

多层次中的期中一层的click事件 $(*).click(function(e){ ...; e.stopPropagation(); })

五.阻止表单提交,和超级链接转向 e.preventDefault(); 还有 onclick="window.event.returnValue=false" 也可以进行阻止

$("a").click(function(e) {e.preventDefault() }) //阻止所有的超级链接

六.属性: pageX, pageY, target获得触发事件的元素(冒泡的起始,和this不一样) ,which如果是鼠标事件获得按键(1左键 2中建 3右键) altKey,shiftKey,ctrlKey,获得alt,shift,ctrl是否按下,为bool值. keyCode属性发生事件时的keyCode( 键盘码, 小键盘的1和主键盘的keyCode不一样,charCode是一样的,是ASC码)

七:移除事件绑定 unbind()移除元素上所有的事件, unbind("click")只能移除click事件的绑定

bind: +=

unbind: -=

八.一次性事件只执行一次的事件,使用one()方法事件绑定 one("click",fn)一次点击

this随监听事件改变,为当前的监听对象,

target对应的是最原始触发事件的对象同srcElement

21.鼠标

一.在mousemove,click等时间的匿名响应函数中如果制定一个参数e.那么就可以从e读取发生时间是的一些信息, 比如对于mousemove等鼠标事件来说,就可以读取e.pageX, e.pageY来获得发生事件时鼠标在页面的坐标

二.坐标 e.pageX; e.pageY;

练习: 图片随着鼠标走注意div的style="position:absolute"

          $(document).mousemove( function (e) {
                 $( "#fly").css("left" ,e.pageX).css("top",e.pageY);
             });

三.练习美女图片详细解析层

     //用AJEX传入
        var data = { "images/LDH_S.jpg" : ["images/LDH.jpg", "刘德华" , "170"],
            "images/LYF_S.jpg": ["images/LYF.jpg" , "刘亦菲", "160" ],
            "images/ZJL_S.jpg": ["images/ZJL.jpg" , "周杰伦", "170" ]
        };
        $( function () {
            $.each(data, function (key, value) {
                var small = $("<img alt='Sorry' src='" + key + "' />")
                small.attr( "bigmappath", value[0]);
                small.attr( "personname", value[1]);
                small.attr( "personheight", value[2]);
                $( "#divS").append(small);
                $(small).mousemove( function (e) {
                    $( "#detail").css("display" , "").css( "left", e.pageX).css("top" , e.pageY);
                    $( "#bigmap").attr("src" , $(this).attr( "bigmappath"));
                    $( "#detailname").text($(this ).attr("personname"));
                    $( "#detailheight").text($(this ).attr("personheight"));
                    $( "#detailclose").click(function () { $("#detail").css( "display", "none" ); });
                });
            });
        });

21.动画

一. show(), hide() 方法显示,隐藏元素. 用toggle()方法进行显示,隐藏切换

$(*).click(function(){ $(this).hide(fast) })

hide()里面可以增加参数,毫秒为单位 fast(200ms), slow()

练习: 模拟qq列表

          $(function () {
            $( "#qq li:odd").addClass("body" ).hide(); //设置子项样式并隐藏
            $( "#qq li:even").addClass("head" ).click(function () {
                $( this).next("li.body" ).toggle("fast");
            }); //设置父项样式并写点击事件
        });
          ul{ list-style-type :none}
    .head{ background-color :Red}
    .body{ border-color :Blue; border-bottom-style:solid ; border-bottom-width: 2px}

二.其他在具体可以看书,这里不是重点

22.JQuery插件: Jquery cookie

一.什么是cookie: Cookie就是保存在浏览器上的呢绒,用户在这次浏览网页的时候向cookie中保存文本内容,下次再访问页面的时候就可以取出来上次保存的内容,这样就可以得到上次"记忆"的内容/ Cookie不是Jquery特有的概念,只不过JqueryCookie把它简化得更好用而已.Cookie就是存储在浏览器里的一些数据.

二.Cookie需要浏览器的支持,浏览器的Cookie就是可以禁用,如果禁用了Cookie就不能使用了,不过一般不用考虑禁用Cookie的情况.Cookie的几个特性: Cookie是与域名相关的, 所以163.com不能读取baidu.com的cookie,正因为如此读取,设置cookie的时候不用担心不同域名cookie的冲突; 一个域名能写入Cookie总尺度是有限制的,一般是几千字节,能写入的Cookie总条数一般为几十条,超过以后浏览器自己会根据自己的策略移除一些Cookie; Cookie不是写入后一定下次能读出来,cookie是可以手工删除的.

22.Jquery cookie的使用

一.使用方法, Cookie保存的是键值对

1)添加jquery.cookie.js

2)赋值$.cookie("用户名","tom"); cookie中保存的值都是文本

3)取值$.cookie("用户名");

二.设置值得时候还可以指定第三个参数,$.cookie("名字","值",{expires:7,path:"/",domain:"itast.cn",secure:true}) {*时间:7天,'',*允许访问域名,}

练习:

      $(function () {
            if ($.cookie("BgColor" )) {
                $(document.body).css( "background", $.cookie("BgColor" ));
            }
            $( "#BgGreen").click(function () { $(document.body).css("background", "Green"); $.cookie("BgColor" ,"Green"); });
            $( "#BgRed").click(function () { $(document.body).css("background", "Red"); $.cookie("BgColor" , "Red"); });
            $( "#BgYellow").click(function () { $(document.body).css("background", "Yellow"); $.cookie("BgColor" , "Yellow"); });
        });

23.常用Jquery插件

一.JQuery官方的UI控件 JWueryUI

http://jqueryui.com/ 下载包

延时常用方法,分析代码

二.JQuery.validate 表单验证插件

三.form 用于为表单提供直接ajax能力

四.所有插件列表 http://plugins.jquery.con

24.IE调试工具

debugbar 查看网页代码

ie自带的调试工具也很不错

最后.随记

如果报错"例外被抛出"等,很可能是选择器表达式有问题,比如单词拼写错误,加了不必要的空格等.val是方法不是属性.JQuery是完全按照js的语法写出来的函数库,完全符合js规范,因此完全可以和普通js代码混着用,但最好不要dom和jquery混着用.

$("body *").click() //body下所有控件的点击事件

如果想要获得事件的相关信息,可以在function(e)传入参数中引入e

this 和 element

结论:this是监听当前的事件的对象,而event.srcElement是引发事件的对象.

当event发生时，srcElement和target是返回事件的目标节点（触发该事件的节点），即直接引发事件的那个元素。

this返回的则是定义了该event响应函数的那个元素。

动态添加标签时,必须先append后才能通过标签来赋值

posted @ 2013-02-18 23:04 朱京辉阅读(294) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

朱京辉

JQuery 学习进阶

公告