JQuery选择器操作
!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选择器操作的更多相关文章
- 10种jquery选择器操作详解（转）
jquery选择器大体上可分为4 类: 1.基本选择器2.层次选择器3.过滤选择器4.表单选择器 其中过滤选择器可以分为:1.简单过滤选择器2.内容过滤选择器3.可见性过滤选择器4.属性过滤选择器5. ...
- jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1
第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: ...
- [每日一题jQuery] jQuery选择器总结：进一步过滤、同级操作、后代操作
jQuery选择器继承自CSS的风格,可以通过jQuery选择器找出特定的DOM元素,在此基础上对该元素做相应处理.jQuery不仅支持简单的标签选择器.类选择器.id选择器,还针对表单状态.子元素. ...
- 【如何使用jQuery】【jQuery弹出框】【jQuery对div进行操作】【jQuery对class，id，type的操作】【jquery选择器】
1.如何使用jQuery jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨 ...
- [转]jQuery 选择器和dom操作
居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- JQuery选择器和DOM的操作-入门学习
嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascr ...
- Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM
Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...
- js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...
随机推荐
- 前端SEO优化
结构优化 1.扁平化结构,目录层次越少越好
- 获取浏览器版本Asp.Net
public static string GetBrowser() { HttpBrowserCapabilities bc = HttpContext.Current.Request.Browser ...
- Java进阶02 异常处理
链接地址:http://www.cnblogs.com/vamei/archive/2013/04/09/3000894.html 作者:Vamei 出处:http://www.cnblogs.com ...
- javascript函数的声明，及返回值
<1> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>< ...
- 用xerces-c来进行xml schema校验
在xerces-c的官方站点上有文章指引说明是怎样进行xml schema校验. http://xerces.apache.org/xerces-c/schema-3.html 给出的样例代码: // ...
- Java 23种设计模式详尽分析与实例解析之三--行为型模式
Java设计模式 行为型模式 职责链模式 模式动机:职责链可以是一条直线.一个环或者一个树形结构.链上的每一个对象都是请求处理者,职责链模式可以将请求的处理组织成一条链,并使请求链传递,由链上的处理者 ...
- jssdk微信图片上传功能
/*wx.config({ debug: false, appId: data.appid, timestamp: data.timestamp, nonceStr: data.nonceStr, s ...
- Js版游戏打砖块开发过程详细
最近对js的小游戏开发来了兴趣,前段时间由于回答度娘知道的提问写了个贪吃蛇,虽然难度不大并不复杂,感觉还挺有意思.感觉小时候玩过的什么俄罗斯方块,坦克大战什么的都可以试着用js实现下,这天来了兴致又想 ...
- EL表达式(3)
本篇讲解使用EL表达式来调用Java方法(自定义EL函数)和Sun公司开发的EL函数库. 简单来说,我们在一个类中的某个方法,可以使用EL进行调用,这个能被EL表达式调用的方法称之为EL函数,但是这种 ...
- 修改XPMenu让ToolButton在Down=True时正确显示
XPMenu是一个不错的程序界面效果控件,但它也存在不少不足之处.我最近又对它作了一点修改. 原因是我在程序里有一个ToolButton,其Style=tbsButton,当Down=True时,XP ...