!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="jquery-1.8.2.min.js"></script>
<script language="javascript">
//ready 事件的触发时机 ：在整个Html文本在浏览器加载完毕才会触发，图片之类的东西可能没显示出来 。
//相当于在</Html>之后写的脚本 **重要
$(document).ready(function () {
//alert("你好")
$("div div:contains(3)").click(function () {
//一基础过滤
//里面写div ,span是用标签选择器 里面写id 就用id选择器 还有些class==值 是用class 使用class选择器
//如果里面写div 空格div那就是查找 div里面的div（用空格是后代关系）
//div>div （查找父级是div的 div）
//.cc:first查找第一个.cc :first是第一个的意思 :last最后一个 :eq(索引号)找任意一个:lt(索引号)大于某个索引号 :gt(索引号) - 小于某个索引号
//:odd - 奇数个 :even - 偶数个:not(选择器)排除摸一个
//二属性过滤
//div[woqu] [属性名] - 选择拥有这个属性的元素 div[woqu=aaa] [属性名]找属性名等于某个值 [属性名!=aaa]找属性找属性名不等于某个值
//[属性名*=a] - 属性值中包含某个值 [属性名^=a] 属性值是以..开头 [属性名$=a] 属性值是...结尾
//三 内容过滤
//:has(span) - 开始与结束标记之间是否包含某类子元素，如果包含，就选择出来。
//:contains(3) - 开始与结束标记之间是否包含某段文字，如何包含就选择出来。
alert("你们好")//点击触发
}).mouseover(function () {
$(this).css("background-color", "red").css("font-size","48px");//this d等于是#dd 鼠标移动上去背景变成红色 mouseover 鼠标移动上去事件
}).mouseout(function () {
$(this).css("background-color", "white");//this d等于是#dd 鼠标移动下去背景变成白色 mouseout 鼠标离开事件
})
});//ready()是个事件 ，浏览器吧界面的Html代码加载完毕触发

</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="dd">
环妹
<div>
一天虐我千百遍
</div>
</div>
<div id="dd" woqu="aaa">
文超
</div>
<div id="dd"class="cc">
<span>1234</span>
小雨
</div>
<div id="dd">
阿辉
</div>
<div id="dd" class="cc">
大梅子
</div>
<div id="dd">
随便乱写
</div>
<span>
a 啊啊
<div>
第三层
</div>
</span>
</div>
</form>
</body>
</html>

JQuery选择器操作的更多相关文章

  1. 10种jquery选择器操作详解（转）

    jquery选择器大体上可分为4 类: 1.基本选择器2.层次选择器3.过滤选择器4.表单选择器 其中过滤选择器可以分为:1.简单过滤选择器2.内容过滤选择器3.可见性过滤选择器4.属性过滤选择器5. ...

  2. jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...

  3. [每日一题jQuery] jQuery选择器总结：进一步过滤、同级操作、后代操作

    jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...

  4. 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】

    1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...

  5. [转]jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  6. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  7. JQuery选择器和DOM的操作-入门学习

    嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...

  8. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

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

  9. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

随机推荐

  1. 自己用js写的两个日历控件

    前一阵写了两个日历控件,做了简单的封装,发出来共朋友们参考. 第一个日历控件,条状的日历. (使用方法:调用initBarTime(id,evn),第一个参数是要渲染div的id,第二个参数是点击日期 ...

  2. 总结：js中4类修改样式的方法

    前言 最近在写一个扩展右键菜单的插件,既然是插件,想着一步到位,把相关的style样式设置都丢进js文件中,直接加载一个js文件便可以使用该插件,所以今天就研究了下js批量的插入样式的方法,即addS ...

  3. perl oracle utf-8 结果匹配中文字符

    [oracle@oadb sbin]$ cat s1.pl #!/usr/bin/perl use DBI; use Encode; use HTTP::Date qw(time2iso str2ti ...

  4. MVC：Controller向View传值方式总结

    Controller向View传值方式总结 总结发现ASP.NET MVC中Controller向View传值的方式共有6种,分别是: ViewBag ViewData TempData 向普通Vie ...

  5. 当装了两个tomcat后，如何修改tomcat端口

    链接地址:http://blog.csdn.net/alongwilliam/article/details/8199974 以前只知道当tomcat端口号冲突了如何修改tomcat默认的8080端口 ...

  6. int 转换成 CString（VC2008里有这个问题）

    int s = 123; CString str; str.Format("%d",s); 这样就可以了,但是有的会提示这个错误 如果出现这个错误,就改成下面这个就OK了:  st ...

  7. 基于visual Studio2013解决C语言竞赛题之1036递归求值

          题目 解决代码及点评 /* 36.已知有如下递推公式 求该数列的前n项.不允许使用数组. */ float fp50036(int n,float x,float ...

  8. Emmet插件

    p{font-size: 18px; color: #666;} body{background-color:#F3F3F3} .code{color:#3974C3;font-size: 14px; ...

  9. C/C++：多个.cpp文件包括同一个.h头文件定义方法

    本文解决multiple definition of `XX'的错误.[出于反爬虫的目的,你不是在http://blog.csdn.net/zhanh1218上看到的,肯定不是最新最全的.] 关于头文 ...

  10. QNX简介<转载>

     QNX QNX是由QNX软件系统有限公司开发的实时操作系统. http://blog.csdn.net/happyhell/article/details/7087199 基本特征 * QNX是一个 ...