JQ第二天

一、属性、表单过滤选择器

• $("div[id]")选取有id属性的<div>//$("div [id]")有空格表示div层当中有id属性的元素
• $("div[titlt=test]")选取title属性为"test"的<div>。因为jQ中没有对getElementsByName进行封装
• $("div[title!=test]")选取title属性不为"test"的<div>
• 可以选择开头【name^=值】,结束[name$=值]，包含[name*=值]等，并且条件是可以进行复合的。[[属性1=a][属性2=b].....]
• 以下为表单对象属性选择器（过滤器）
• $("#form1 :enabled")选取id为form1的表单内所有启用的元素
• $("#form1 :disabled")选取id为form1的表单内所有禁用的元素（没有空格表被禁用的form）
• $("input:checked")选取所有选中的元素(Radio.CheckBox),这个中间不能加空格。
• $("select:selected")选取所有选中的选项元素

二、元素中的each

• $(selector).each(function(index,element))

  必需。为每个匹配元素规定运行的函数。

  • index - 选择器的 index 位置
  • element - 当前的元素（也可使用 "this" 选择器）

var cks=$('div input:checked');

cks.each(function (index,ele)){

　　alerts($(ele).val());

}

三、其他过滤器

1)\

• $(":input")选取所有<input>,<textarea>.<select>和<button>元素，而$("input")只获得<input>
• $(":text")选取所有的单行文本框，等价于$("input[type=text]")
• 用于代替$("input[type=**]")

2)内容过滤器

• ：contains(text);过滤出包含给定文本的元素
• :empty;过滤出所有不包含子元素或者文本元素的空元素
• :has(selector);过滤出元素中包含（即子元素中）selector选择器能选择到的元素
• :parent;过滤出可以当父元素的元素，或者元素中包含文本

四、子元素过滤器

• :first-child与:first的区别
  • $('ul li:first')只返回一个li元素
  • $('ul li:first-child')//为每一个父元素（ul）都返回一个li
• :last-child
• :only-child:匹配当前只有一个子元素的元素
• :nth-child,为每一个父元素都匹配一个子元素
  • :nth-child(index),index start form 1
  • :nth-child(even)
  • :nth-child(odd)
  • :nth-child(3n),选取3的倍数的元素
  • :nth-child(3n+1),满足3的倍数+1的元素

五、attr

• $('#ck').attr('checked',true);//一般写两个值，属性和属性值，--设置该属性是该值，如果只写了一个属性，那么获取的是该属性的值
• $('div').removeAttr('属性的名字');//表示移除该属性

六、动态创建元素

• $('<a href="http://www.baidu.com"></a>').text('百度').appendTo($('body'));
• //创建一个超链接添加到body中
• var akObj=$('<a href='http://www.baidu.com'></a>').text('百度');
• $('body').append(akObj);//添加到akObj中

小广告的代码

<script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                var dvObj = $('<div style="width:300px;height:200px;position:absolute;right:0;bottom:0;"></div>').appendTo($('body'));

                $('<span style="float:right;cursor:pointer;">X</span>').click(function () {
                    $(this).parent().remove();

                }).appendTo(dvObj);
            })
        })
    </script>

---

$(function () {//动态生成表格
            var dic = { "百度": "http://www.baidu.com", "好123": "http://www.hao123.com", "谷歌": "http://www.google.com" };
            $('#btn').click(function () {
                var Objtab = $('<table border="1"></table>').appendTo('body');
                for (var key in dic) {
                    $('<tr><td>'+key+'</td><td><a href="'+dic[key]+'">'+key+'</a></td></tr>').appendTo(Objtab);
                }
            });

})

---

<script type="text/javascript">
        $(function () {
            sec = 5;
            var setId = setInterval(function () {
                sec--;
                if(sec<=0)
                {
                    sec = 0;
                    clearInterval(setId);
                    $('#btn').val('同意').attr('disabled', false);
                }
                else
                {
                    $('#btn').val('请仔细阅读要求(' + sec + ')');
                }
            }, 1000);
        })
    </script>

<input type="button" value="请仔细阅读要求(5)" disabled="disabled" id="btn" name="name"/>

七、blur：当元素失去焦点时发生 blur 事件。

作用：当元素失去焦点时改变其颜色：

$(':text').blur(function () {
                if ($(this).val().length == 0) {
                    $(this).css('border-color', 'red');
                } else {
                    $(this).css('border-color', '');
           　  }
 });

八、一些小总结

• appendTo会把这个元素移到另一个元素之中，剪切
• 而且剪切过去之后的，本来应有的事件会继续保留，除非用unbind行为去移除这一个事件

九、结束

• 替换节点：$("br").replaceWith("<hr/>") note:用<hr/>替换br
• 包裹节点：wrap()方法用来将所有元素逐个用定义标签包裹：wrapAll()
• $('b').wrap('<font color='red'></font>')将所有粗体字用红色显示