jQuery入门2 jquery入门第四关过滤选择器

jQuery是什么

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作

jQuery官网

jQuery的九类选择器

目的：通过选择器，能定位web页面（HTML/JSP/XML）中的任何标签

（1）基本选择器

（2）层次选择器

（3）增强基本选择器

（4）内容选择器

（5）可见性选择器

（6）属性选择器

（7）子元素选择器

（8）表单选择器

（9）表单对象属性选择器

注意：项目中，通常是多种选择器一起使用

概念总结

jQuery总结

下面详细介绍一下头四种选择器：

（1）基本选择器

• 查找ID为"div1ID"的元素个数

alert( $("#div1ID").size() );

• 查找DIV元素的个数

alert( $("div").size() );

• 查找所有样式是"myClass"的元素的个数

alert( $(".myClass").size() );

• 查找所有DIV,SPAN,P元素的个数

alert( $("div,span,p").size() );

• 查找所有ID为div1ID,CLASS为myClass,P元素的个数

alert( $('#div1ID,.myClass,p').size() );

（2）层次选择器

• 找到表单form里所有的input元素的个数

alert( $("form input").size() );

• 找到表单form里所有的子级input元素个数

alert( $("form > input").size() );

• 找到表单form同级第一个input元素的value属性值

alert( $("form + input").val() );

• 找到所有与表单form同级的input元素个数

alert( $("form ~ input").size() );

（3）增强基本选择器

• 查找UL中第一个元素的内容

alert( $("ul li:first").text() );

• 查找UL中最后个元素的内容

alert( $("ul li:last").text() );

• 查找表格的索引号为1、3、5...奇数行个数，索引号从0开始

alert( $("table tr:odd").size() );

• 查找表格的索引号为2、4、6...偶数行个数，索引号从0开始

alert( $("table tr:even").size() );

• 查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式

alert( $("table tr td:eq(1)").text() );

• 查找表格中第二第三行的个数，即索引值是1和2，也就是比0大

alert( $("table tr:gt(0)").size() );

• 查找表格中第一第二行的个数，即索引值是0和1，也就是比2小

alert( $("table tr:lt(2)").size() );

• 给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色

$(":header").css("background-color","red").css("color","blue");

• 查找所有未选中的input为checkbox的元素个数

alert( $(":checkbox:NOT(:checked)").size() );

（4）内容选择器

• 查找所有包含文本"John"的div元素的个数

alert( $("div:contains('John')").size() );

• 查找所有p元素为空的元素个数

alert( $("p:empty").size() );

• 给所有包含p元素的div元素添加一个myClass样式

$("div:has(p)").addClass("myClass");

• 查找所有含有子元素或者文本的p元素个数,即p为父元素

alert( $("p:parent").size() );

jQuery常用Method-API

目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查

DOM分类

DOM规则与jQuery技术的关系

（1）DOM简述与分类

（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)

（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，

跨浏览器(ie/firefox/Chrome)的标准规则

（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程

（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS

（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等

（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用

each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，

this表示当前需要迭代的js对象

append()：追加到父元素之后

prepend()：追加到父元素之前

after()：追加到兄弟元素之后

before()：追加到兄弟元素之前

attr(name)：获取属性值 attr(name,value)：给符合条件的标签添加key-value属性对

$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本

remove()：删除自已及其后代节点

val()：获取value属性的值

val("")：设置value属性值为""空串，相当于清空

text()：获取HTML或XML标签之间的值

text("")：设置HTML或XML标签之间的值为""空串

clone()：只复制样式，不复制行为

clone(true)：既复制样式，又复制行为

replaceWith()：替代原来的节点

removeAttr()：删除已存在的属性

addClass()：增加已存在的样式

removeClass()：删除已存在的样式

hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式

toggleClass()：如果标签有样式就删除，否则增加样式

offset()：获取对象的left和top坐标

offset({top:100,left:200})：将对象直接定位到指定的left和top坐标

width()：获取对象的宽

width(300)：设置对象的宽

height()：获取对象的高

height(500)：设置对象的高

children()：只查询子节点，不含后代节点

next()：下一下兄弟节点

prev()：上一下兄弟节点

siblings()：上下兄弟节点

show()：显示对象

hide()：隐藏对象

fadeIn()：淡入显示对象

fadeOut()：淡出隐藏对象

slideUp()：向上滑动

slideDown()：向下滑动

slideToggle()：上下切换滑动，速度快点

面试题--find("9类选择器")：查询指定的节点和多重each()迭代

//使用jquery弹出奇数的tr标签下的td里的值

var $tr = $("table tr:lt(4):even");

$tr.each(function(){

//tr中查找td标签,$(this)表示tr

var $td = $(this).find("td");

$td.each(function(){

//$(this)表示td

var txt = $(this).text();

alert(txt);

});

});

jQuery常用Event-API

目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理

window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者

ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化

ready和onload同时存在时，二者都会触发执行，ready快于onload

change：当内容改变时触发

focus：焦点获取

select：选中所有的文本值

keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同

mousemove：在指定区域中不断移动触发

mouseover：鼠标移入时触发

mouseout：鼠标移出时触发

submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台

click：单击触发

dblclick：双击触发

blur：焦点失去

面试的思路

jQuery的第二部分就先介绍到这里了，下次将是jQuery入门的最后一个部分：《jQuery入门3》，敬请期待。