1、属性选择器

<script language="JavaScript">
/**
* <input type="button" value=" 含有属性title 的div元素" id="b1"/>
*/
$("#b1").click(function(){
$("div[title]").css("background","red");
});

/**
* <input type="button" value=" 属性title值等于test的div元素" id="b2"/>
*/
$("#b2").click(function(){
$("div[title='test']").css("background","red");
});

/**
* <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/>
*/
$("#b3").click(function(){
$("div[title!='test']").css("background","red");
});

/**
* <input type="button" value=" 属性title值 以te开始 的div元素." id="b4"/>
*/
$("#b4").click(function(){
$("div[title^='test']").css("background","red");
});

/**
* <input type="button" value=" 属性title值 以est结束 的div元素.." id="b5"/>
*/
$("#b5").click(function(){
$("div[title$='est']").css("background","red");
});

/**
* <input type="button" value="属性title值 含有es的div元素." id="b6"/>
*/
$("#b6").click(function(){
$("div[title*='est']").css("background","red");
});

/**
* <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/>
*/
$("#b7").click(function(){
$("div[id][title*='es']").css("background","red");
});

/**
* <input type="button" value="选择隐藏域,含有title的属性的div,id为one,class为one的元素" id="b8"/>
*/
$("#b8").click(function(){
$("input[type='hidden'],div[title],#one,.one").css("background","red");
});
</script>

2、jQuery过滤器

<script language="JavaScript">
/**
* <input type="button" value=" 改变第一个 div 元素的背景色为 #0000FF" id="b1"/>
*/
$("#b1").click(function(){
//$("div:first").css("background","red");
/**
* $("div")是一个jQuery对象所以能调用first方法
* 调用first方法的返回值还是一个jQuery对象,所以还能调用jquery中的api的任意一个方法
*/
$("div").first().css("background","red");
});

/**
* <input type="button" value=" 改变最后一个 div 元素的背景色为 #0000FF" id="b2"/>
*/
$("#b2").click(function(){

$("div:last").css("background","red");
});

/**
* <input type="button" value=" 改变class不为 one 的所有 div 元素的背景色为 #0000FF" id="b3"/>
*/
$("#b3").click(function(){
$("div:not(.one)").css("background","red");
});

/**
* <input type="button" value=" 改变class不为one,有title属性,并且title属性的值为aa的div元素的背景色为红色" id="b3_1"/>
*/
$("#b3_1").click(function(){
$("div:not(.one)[title='aa']").css("background","red");
});

/**
* <input type="button" value=" 改变索引值为偶数的 div 元素的背景色为 #0000FF" id="b4"/>
*/
$("#b4").click(function(){
$("div:even").css("background","red");
});

/**
* <input type="button" value=" 改变索引值为奇数的 div 元素的背景色为 #0000FF" id="b5"/>
*/
$("#b5").click(function(){
$("div:odd").css("background","red");
});

/**
* <input type="button" value=" 改变索引值为大于 3 的 div 元素的背景色为 #0000FF" id="b6"/>
*/
$("#b6").click(function(){
$("div:gt(3)").css("background","red");
});

/**
* <input type="button" value=" 改变索引值为等于 3 的 div 元素的背景色为 #0000FF" id="b7"/>
*/
$("#b7").click(function(){
$("div:eq(3)").css("background","red");
});

/**
* <input type="button" value=" 改变索引值为小于 3 的 div 元素的背景色为 #0000FF" id="b8"/>
*/
$("#b8").click(function(){
$("div:lt(3)").css("background","red");
});
/**
* <input type="button" value=" 改变所有的标题元素的背景色为 #0000FF" id="b9"/>
*/
$("#b9").click(function(){
$(":header").css("background","red");
});
/**
* <input type="button" value=" 改变索引值大于1小于6的div元素的背景色为 #0000FF" id="b10"/>
*/
$("#b10").click(function(){
$("div:lt(6):gt(1)").css("background","red");
});
</script>

3、设置table隔行变色

<script type="text/javascript">
/**
* $(document)=$()
*/
$(document).ready(function(){
$("#t1 tr:even").css("background","red");
$("#t1 tr:odd").css("background","green");

/**
* $("#t2 tr td:first").css("background","red");
* 首先找到id为t2的元素,再查找下面的子元素tr,从第一个tr元素开始查找子元素:第一个td,找到以后停止
*/
//会去每一个tr下查找子元素第一个td
$("#t2 tr td:first-child").css("background","red");

//each方法就是遍历每一个tr
$("#t3 tr").each(function(){
//查找每一个tr对象中的子元素:奇数行或者偶数行的子元素
$(this).children(":even").css("background","red");
$(this).children(":odd").css("background","green");
});

});
</script>

<body>
This is my HTML page. <br>
<table id="t1">
<tr>
<td>afds</td>
<td>asdf</td>
</tr>
<tr>
<td>asdf</td>
<td>afds</td>
</tr>
<tr>
<td>afds</td>
<td>asfd</td>
</tr>
<tr>
<td>asfd</td>
<td>afds</td>
</tr>
</table>
<br>
<br>
<br>
<table id="t2">
<tr>
<td>id</td>
<td>name</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
</tr>
</table>

<table id="t3">
<tr>
<td>id</td>
<td>name</td>
<td>sex</td>
</tr>
<tr>
<td>1</td>
<td>aaa</td>
<td>aaa</td>
</tr>
<tr>
<td>2</td>
<td>bbb</td>
<td>aaa</td>
</tr>
<tr>
<td>3</td>
<td>ccc</td>
<td>aaa</td>
</tr>
</table>
</body>

4、基本的选择器

<script language="JavaScript">
/**
* <input type="button" value="改变 id 为 one 的元素的背景色为 #0000FF" id="b1"/>
* @param {Object} "#one"
*/
//给id为b1的按钮添加一个click事件
$("#b1").click(function(){
//改变id为one的元素的背景色
$("#one").css("background","red");
});

/**
* <input type="button" value=" 改变元素名为 <div> 的所有元素的背景色为 #00FFFF" id="b2"/>
*/
$("#b2").click(function(){
$("div").css("background","red");//该操作是一个数组操作
});

/**
* <input type="button" value=" 改变 class 为 mini 的所有元素的背景色为 #FF0033" id="b3"/>
*/
$("#b3").click(function(){
$(".mini").css("background","red");
});

/**
* <input type="button" value=" 改变所有元素的背景色为 #00FF33" id="b4"/>
*/
$("#b4").click(function(){
$("*").css("background","red");
});

/**
* <input type="button" value=" 改变所有的<span>元素和 id 为 two 的元素的背景色为 #3399FF" id="b5"/>
*/
$("#b5").click(function(){
$("span,#two").css("background","red");
});

/**
* <input type="button" value=" 改变所有的<span>元素和 id 为 two 的,id为one的,class为 mini的所有的元素的背景色为 #3399FF" id="b6"/>
*/
$("#b6").click(function(){
$("span,#two,#one,.mini").css("background","red");
});
</script>

5、子元素选择器

<script language="JavaScript">
/**
* 子元素选择器的一个特点:在每一个特定的元素下寻找子元素
* @param {Object} "div.one :nth-child(2)"
*/
/**
* <input type="button" value=" 每个class为one的div父元素下的第2个子元素" id="b1"/>
* 必须有空格
*/
$("#b1").click(function(){
$("div.one :nth-child(2)").css("background","red");
});

/**
* <input type="button" value=" 每个class为one的div父元素下的第一个子元素" id="b2"/>
*/
$("#b2").click(function(){
$("div.one :nth-child(1)").css("background","red");
});

/**
* <input type="button" value=" 每个class为one的div父元素下的最后一个子元素" id="b3"/>
*/
$("#b3").click(function(){
$("div.one :last-child").css("background","red");
});

/**
* <input type="button" value=" 如果class为one的div父元素下的仅仅只有一个子元素,那么选中这个子元素" id="b4"/>
*/
$("#b4").click(function(){
$("div.one :only-child").css("background","red");
});
</script>

6、内容过滤器

<script language="JavaScript">
/**
* <input type="button" value=" 改变含有文本 ‘di’ 的 div 元素的背景色为 #0000FF" id="b1"/>
*/
$("#b1").click(function(){
$("div:contains('di')").css("background","red");
});
/**
* <input type="button" value=" 改变不包含子元素(或者文本元素) 的 div 空元素的背景色为" id="b2"/>
*/
$("#b2").click(function(){
$("div:empty").css("background","red");
});
/**
* <input type="button" value=" 改变含有 class 为 mini 元素的 div 元素的背景色为 #0000FF" id="b3"/>
*/
$("#b3").click(function(){
$("div:has(.mini)").css("background","red");
});
/**
* <input type="button" value=" 改变含有子元素(或者文本元素)的div元素的背景色为 #0000FF" id="b4"/>
*/
$("#b4").click(function(){
$("div:parent").css("background","red");
});

/**
* <input type="button" value=" 改变不含有文本 di; 的 div 元素的背景色" id="b5"/>
*/
$("#b5").click(function(){
$("div:not(:contains('di'))").css("background","red");
});
</script>

7、表单选择器

<script language="JavaScript">
/**
* <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内可用 <input> 元素的值" id="b1"/>
*/
$("#b1").click(function(){
$("input:enabled").val("aaaa");
});

/**
* <input type="button" value="利用 jQuery 对象的 val() 方法改变表单内不可用 <input> 元素的值" id="b2"/>
*/
$("#b2").click(function(){
$("input:disabled").val("aaaa");
});

/**
* <input type="button" value=" 利用 jQuery 对象的 length 属性获取多选框选中的个数" id="b3"/>
*/
$("#b3").click(function(){
$("input[type='checkbox']:checked").each(function(){
alert($(this).val());
});
});
/**
* <input type="button" value=" 利用 jQuery 对象的 text() 方法获取下拉框选中的内容" id="b4"/>
*/
$("#b4").click(function(){
/**
* id为job下的被选中的option元素
* @param {Object} $(this
*/
$("#job option:selected").each(function(){
alert($(this).text());
});
});
</script>

8、层次选择器

<script language="JavaScript">
/**
* <input type="button" value="改变 <body> 内所有 <div> 的背景色为 #0000FF" id="b1"/>
*/
$("#b1").click(function(){
$("body div").css("background","red");
});
/**
* <input type="button" value=" 改变 <body> 内子 <div> 的背景色为 #FF0033" id="b2"/>
*/
$("#b2").click(function(){
$("body>div").css("background","red");
});
/**
* <input type="button" value=" 改变 id 为 one 的下一个 <div> 的背景色为 #0000FF" id="b3"/>
*/
$("#b3").click(function(){
$("#one+div").css("background","red");
});
/**
* <input type="button" value=" 改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # #0000FF" id="b4"/>
*/
$("#b4").click(function(){
$("#two~div").css("background","red");
});
/**
* <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF" id="b5"/>
*/
$("#b5").click(function(){
$("#two").siblings("div").css("background","red");
});
/**
* <input type="button" value=" 改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 #0000FF,id为two的被选中" id="b6"/>
*/
$("#b6").click(function(){
$("#two").siblings("div").css("background","red");
$("#two").css("background","red");
});
</script>

9、可见选择器

<script language="JavaScript">
/**
* <input type="button" value=" 改变所有可见的div元素的背景色为 #0000FF" id="b1"/>
*/
$("#b1").click(function(){
$("div:visible").css("background","red");
});
/**
* <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 #0000FF" id="b2"/>
*/
$("#b2").click(function(){
$(":hidden").show().css("background","red");
});
/**
* <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值" id="b3"/>
*/
$("#b3").click(function(){
$("input:hidden").each(function(){
var $obj = $(this);
alert($obj.val());
});
});
</script>

2、jQuery操作Dom(过滤器与选择器)的更多相关文章

  1. Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

  2. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  3. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  4. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  5. *jquery操作DOM总结 (原创:最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  6. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  7. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  8. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  9. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

随机推荐

  1. 全国5A级旅游景区已达250家

    至目前,全国5A级旅游景区已达250家,快来数数你去过多少? 全国5A级旅游景区 西藏(+) 拉萨市大昭寺.拉萨布达拉宫景区.日喀则扎什伦布寺景区.林芝巴松措景区 新增1:日喀则扎什伦布寺景区 扎什伦 ...

  2. asp.net mvc 特性路由(MapMvcAttributeRoutes)的应用

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u012835032/article/details/51160824asp.net mvc 特性路由 ...

  3. mongodb写入策略(WriteConcern)

    写入策略(WriteConcern) mongodb的写入策略有多种方式,写入策略是指当客户端发起写入请求后,数据库什么时候给应答,mongodb有三种处理策略:客户端发出去的时候,服务器收到请求的时 ...

  4. left、pixelLeft、posLeft的区别

    yexj00.style.pixelLeft=50yexj00.style.left=50pxyexj00.style.posLeft=50he.style.pixelLeft=39he.style. ...

  5. 开启关闭mysql服务

    1.Windows下 启动服务 mysqld --console 或 net start mysql 关闭服务 mysqladmin -uroot shudown 或 net stop mysql   ...

  6. spring cloud学习--eureka 01

    本博客为学习使用,学习教程翟永超 spring cloud 微服务实战 搭建eureka server注册中心 spring initialize构建spring boot项目 构建网址:https: ...

  7. (4.10)sql server导入导出

    SQL Server快速导入数据分享 核心参考:官网~~https://docs.microsoft.com/zh-cn/sql/relational-databases/import-export/ ...

  8. fieldset与legend,label

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 三、spring的AOP

    AOP的基本认识 Aspect Oriented Programming,面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术 利用AOP可以对业务逻辑的各个部分进行隔离,从而 ...

  10. 初识PHP变量函数语法

    PHP连接字符串 . <?php '你好,'.'我的亲爱的老师'?> PHP语句结束符 <?php echo "欢迎同学们!"; echo "Welco ...