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>')将所有粗体字用红色显示
