###选择器
1.基本选择器
----> #id : id选择器
$('#div1')
----> element : 元素选择器
$('div')
----> .class : 属性选择器
$('.div')
----> * : 任意标签
$('*') 选择所有的标签，包括body
----> selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
$('div,span') 选择所有的div和span元素
----> selector1selector2selectorN : 取多个选择器的交集(相交选择器)
$('div.box') 选择所有class属性为box的div元素
2.层次选择器
查找子元素, 后代元素, 兄弟元素的选择器
----> ancestor descendant 在给定的祖先元素下匹配所有的后代元素
$('ul span') 选中ul下所有的的span
----> parent>child 在给定的父元素下匹配所有的子元素
$("ul>span") 选中ul下所有的子元素span
----> prev+next 匹配所有紧接在 prev 元素后的 next 元素
$(".box+li") 选中class为box的下一个li
----> prev~siblings 匹配 prev 元素之后的所有 siblings 元素
$('ul .box~*') 选中ul下的class为box的元素后面的所有兄弟元素
3.过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
----> $('div:first') 选择第一个div
----> $('.box:last') 选择最后一个class为box的元素
----> $('div:not(.box)') 选择所有class属性不为box的div
----> 选择第二个和第三个li元素
$('li:gt(0):lt(2)') //gt大于，lt小于； 索引起始位置发生变化，重新开始计算
$('li:lt(3):gt(0)') //正确索引位置
----> $('li:contains(BBBBB)') 选择内容为BBBBB的li
----> $('li:hidden ').show() 选择隐藏的li
----> $('li[title]') 选择有title属性的li元素
----> $('li[title=hello]') 选择所有属性title为hello的li元素
4.内容过滤选择器
体现在包含的子元素和文本内容上
----> $('div:contains('张三')') 选择含有文本内容为text的元素
----> $('div:empty') 选择不包含子元素或文本的空元素
----> $('div:has(.mini)') 选择含有选择器.mini所匹配的父元素div的元素
----> $('div:parent') 选择含有子元素或文本的元素
5.可见性过滤选择器
----> $('div:visible')
----> $('div:hidden') 选择不可见的元素
----> $('div:hidden').show() 选择不可见的元素变为可见
----> $('input:hidden').val() 返回表单元素的value值
6.属性过滤选择器
----> $('div[title]') 选取拥有此属性title的元素
----> $('div[title='test']') 选取拥有指定属性的值title='test'的元素
----> $('div[title!='test']') 选取指定属性的值不为test的元素
----> $('div[title^='test']') 选取指定属性的值以test开头的元素
----> $('div[title$='test']') 选取指定属性的值以test结束的元素
----> $('div[title*='test']') 选取指定属性的值含有test的元素
----> $('div[title][title!='test']') 选取指定属性的值含有title且title!=test的元素
7.子元素过滤选择器
----> $(.box :nth-child(index)) 选取每个父元素下的第index个子元素
----> $(.box :first-child) 选取每个父元素下的第1个子元素
----> $(.box :last-child) 选取每个父元素下的最后1个子元素
----> $(.box :only-child) 如果某个元素是它父元素中唯一的子元素，则将被选择
8.表单对象属性过滤选择器
----> $(":text:enabled").val('张三') 选择所有可用的单行文本框值为张三
----> $(":text:disabled").val('张三') 选择所有不可用的单行文本框值为张三
----> $("checkbox[name='box']:checked") 选择所有被选中的元素(单选框，复选框)
----> $("select :selected") 选中所有被选中的选项元素(下拉列表)
----> $("checkbox[name='box']:checked").each(function(){
alert(this.value) //弹出被选中的属性值
})
9.表单选择器
----> $(":input") 选取所有的input 、textarea、select、button元素
----> $(":text") 选取所有的单行文本框
----> $(":password") 选取所有的密码框元素
----> $(":radio") 选取所有的单选框
----> $(":checkbox") 选取所有的多选框
----> $(":submit") 选取所有的提交按钮
----> $(":image") 选取所有的图像按钮
----> $(":reset") 选取所有的重置按钮
----> $(":button") 选取所有的按钮
----> $(":file") 选取所有的上传域
----> $(":hidden") 选取所有的不可见元素
10.选择器操作
----->点击所有的p节点，弹出对应的文本内容
$("p").click(function(){ alert(this.firstChild.nodeValue); 或 alert($(this).text()); })----->使table隔行变色
$("table:first tr:even").css(''background","red")------>点击button，弹出checkbox被选中的个数
$("button").click(function(){ alert($(":checkbox:checked").length) })
11.DOM操作
---->操作文本节点
<li id="bj" > 李四 </li> $(function(){ alert($("#bj").text()) 读取文本节点内容 $("#bj").text("张三") 重写文本节点内容 })---->操作属性节点
<input type='text' name="username" value="张三"/> $(function(){ alert($(":text[name='uesername']").attr('value')) $(":text[name='uesername']").attr('value'，'李四') })---->创建节点
$("<p></p>")
---->将节点插入到指定节点的子节点
append() 向每个匹配的元素的内部 的结尾处追加内容
$("#city").append("<li id='list'>张三</li>")appendTo() 将每个匹配的元素追加到指定的元素中的内部的结尾处
$("<li id='list'>张三</li>").appendTo($("#city"))prepend() 向每个匹配元素的 内部的 开始处插入内容
$("#city").prepend("<li id='list'>张三</li>")prependTo() 将 每个匹配的元素插入到指定的元素内部的开始处
$("<li id='list'>张三</li>").prependTo($("#city"))---->将节点插入到指定节点的前面或后面
$("<li id='list'>张三</li>").insertBefore($("#city"))$("#city").before("<li id='list'>张三</li>")$("<li id='list'>张三</li>").insertAfter($("#city"))$("#city").after("<li id='list'>张三</li>")---->将节点删除或清空
$("#city").remove() 将DOM节点删除
$("#city").empty() 将DOM的所有子节点删除
----->复制节点
$("#city").clone(true).attr("id","city2").insertAfter($('#bj'))
将id为city的节点复制一下，并重置id为city2，插在id为bj的节点后面
为true，则表示为复制节点的同时，并复制节点上面的行为事件
----->替换节点
$("<li>张三</li>").replaceAll($("#city li:last"));
$("#city li:last").replaceWith("<li>张三</li>");
创建<li>张三</li>节点并替换id为city的最后一个li节点
----->互换节点
var $bj = $("#bj").clone(true)
var $city = $("#city").replaceWith($bj)
$("#bj").replaceWith($city)
----->包裹节点
$("li").wrap("<font color='red'></font>")
<li>张三</li><li>李四</li>分别被font标签包裹着：<font color='red'><li>张三</li></font>
<font color='red'><li>李四</li></font>
$("li").wrapAll("<font color='red'></font>")
<li>张三</li><li>李四</li>一块被font标签包裹着：<font color='red'><li>张三</li>
<li>李四</li></font>
$("li").wrapInner("<font color='red'></font>")
<li>张三</li><li>李四</li>里面的文字分别被font标签包裹着：
<li><font color='red'>张三</font></li>
<li><font color='red'>李四</font></li>
12.属性操作
----->html()
$("li").html() 读取某个元素中的html内容
$("li").html("<li>张三</li>") 设置某个元素中的html内容
------>获取焦点时input框中的提示信息去掉，失去焦点时input框中的提示信息显示
$(function () { $(":text").focus(function(){ var val = $(this).val(); if(val==this.defaultValue){ $(this).val(''); } }) .blur(function(){ var val = this.value; if($.trim(val)==''){ this.value = this.defaultValue; } }) })
13.css样式操作
----->hasClass() 某元素是否有指定的样式
$("div").hasClass("box") 打印结果为true
----->removeClass() 移除某元素指定的样式
$("div").removeClass("box")
----->addClass() 添加某元素指定的样式
$("div").addClass("box")
----->toggleClass() 切换某元素指定的样式：指定的样式存在则去除，不存在则添加
$("div").toggleClass("box")
----->获取或设置元素透明度
$("div").css("opacity") $("div").css("opacity",0.5)
----->获取或设置元素宽度或高度
$("div").width() $("div").height()
$("div").width(400) $("div").height(50)
----->获取当前视窗中的相对位移
$("div").offset().top() $("div").offset().left()
14.事件
---->加载DOM
$(docunment).ready(function(){ })
执行时机：网页中所有的DOM结构绘制完毕后执行，可能DOM元素关联的东西并没加载完
编写个数：能同时编写多个
简写：$(function(){ })
window.onload = function(){ }
执行时机：必须等待网页中所有的DOM结构加载完毕后执行
编写个数：只能同时编写一个
简写：无
---->绑定事件bind()
$(function(){ //方法一 $(".box").click(function(){ var falg = $(".content").is(":hhidden") // is()来判断某个给定的jquery对象是否符合指定的选择器 if(falg) $(".content").show() else $(".content").hide() })； //方法二 $(".box").bind("click",function(){ var falg = $(".content").is(":hhidden") // is()来判断某个给定的jquery对象是否符合指定的选择器 if(falg) $(".content").show() else $(".content").hide() }); })---->合成事件hover()
$(function(){ //方法一 var falg = $(".content").is(":hhidden") $(".box").mouseover(function(){ $(".content").show() }).mouseout(function(){ $(".content").hide() }); //方法二 $(".box").hover( function(){ $(".content").show() } , function(){ $(".content").hide() } ); })---->阻止事件冒泡
$(".box").click(function(){
return false;
})
---->事件对象的属性pageX,pageY
$(".box").mouseover( function(event){
$(".content").text(event.pageX,evnet.pageY)
})----->移除事件unbind()
$(".box").click(function(){
$(".box").unbind("click")
})
----->只执行一次的事件one()
$(".box").one("click",function(){
alert("只执行一次后立即被删除");
return false;
})
373
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
