the purpose: write less. do more   写得少，做更多

jquery 基本选择器，

　　$("p ,div ")匹配所有的P元素和DIV元素 ,

　　$("h1#chapter1")匹配id属性值为chapter1的h1的元素。

jquery 层级选择器

<body>

<h1>正确的认知是<em>非常</em>重要的!</h1>

<em>去看看吧!</em>

<body>

$("body em").css("color","red") ：现在两个em元素的内容都是红色，因为两个em都是body的后代

$("body > em").css("color","red"): 现在只有第二个em元素才会显示为红色，因为只有它是body元素的直接子元素

$("h1 > em").css("color","red") ：现在只有第一个em元素才会显示为红色，因为只有它是h1元素的子元素

$("h1 + em").css("color","red") : 现在只有第二个em 元素才会显示为红色，因为它是h1元素的相邻同辈元素

$("div ~ p").css("background-color","green") 匹配div中所有子元素为p的背景色为绿色

Jquery 属性选择器

$('h1[title]') 匹配那些指定了title属性的h1元素

$('h1[class="example"]') 匹配所有指定class属性的属性值为example的h1元素

$('span[title="note"][lang="zh-CN"]')  匹配那此span元素其title属性设置为note而lang属性设置为zh-CN

jquery 子元素过滤

E:first-child 匹配任何html元素E,但元素E必须是它的父节点的第一个子节点元素，

E:last-child  匹配任何html元素E,但元素E必须是它的父节点的最一个子节点元素

E:nth-child  匹配任何html元素E,但元素E必须是它的父节点的第n个子节点元素，$("ul li:nth-child(3)")匹配Ul元素下第3个子元素，参数可是整数负值，0 或正值

E:only-child 匹配任何html元素E,但元素E必须是它的父节点的唯一子节点元素

Jquery note的更多相关文章

  1. 抛弃jQuery：DOM API之操作元素

    原文链接:http://blog.garstasio.com/you-dont-need-jquery/dom-manipulation/ 我的Blog:http://cabbit.me/you-do ...

  2. 原生JS替代jQuery的各种方法汇总

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  3. jQuery与原生JS相互转化

    前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...

  4. Using The jQuery Migrate Plugin

    jQuery( html [, ownerDocument ] )Returns: jQuery Description: Creates DOM elements on the fly from t ...

  5. 原生js替换jQuery各种方法-中文版

    原文https://github.com/nefe/You-D... 原生JS与jQuery操作DOM对比 You Don't Need jQuery 前端发展很快,现代浏览器原生 API 已经足够好 ...

  6. You-Dont-Need-JQuery (你不需要JQuery)

    看完这篇文章我才觉得真的要用JQuery ,因为实在是有些地方设计的使用太复杂了, document.querySelector() 和 Document.querySelectorAll 的确是很方 ...

  7. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  8. Understand JavaScript Callback Functions and Use Them

    In JavaScript, functions are first-class objects; that is, functions are of the type Object and they ...

  9. note.js 引用jQuery，

    1.安装jQuery npm install jquery 在自己的项目目录里面打开cmd进行安装 2.下面直接在js文件里面引用jQuery //调用jQuery来操作页面 const jsdom ...

随机推荐

  1. java中整数类型（short int long）的存储方式

    在java中的整数类型有四种,分别是 byte  short int long 其中byte只有一个字节 0或1,在此不详细讲解. 其他的三种类型如下: 1.基本类型:short 二进制位数:16包装 ...

  2. [POJ 1787]Charlie's Change (动态规划)

    题目链接:http://poj.org/problem?id=1787 题意:有4种货币分别是1元,5元,10元,20元.现在告诉你这四种货币分别有多少个,问你正好凑出P元钱最多可以用多少货币.每种货 ...

  3. Android——android:gravity 和 android:layout_Gravity

    LinearLayout有两个非常相似的属性: android:gravity与android:layout_gravity. 他们的区别在于: android:gravity 属性是对该view中内 ...

  4. 设计模式——适配器模式（Adapter Pattern）

    解决的问题: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本接口不匹配而无法在一起工作的两个类能够在一起工作.比如说我的hp笔记本,美国产品,人家美国的电压是110V的,而我们中国 ...

  5. java 中byte[] 数组的合并

    因工作的需要,在从事 .Net 的开发中接触到了 Java, 虽然在大学的时候学过一段Java 编程,但并没有在实际的工作中使用过, Java 和 .Net的C#语法很相似,都是面向对象的,感觉在语法 ...

  6. math对象和date对象

    math对象的函数方法,记住Math首字母要大写 console.log(Math.abs(-5)); //取绝对值 console.log(Math.ceil(1.1)); //向上取舍 conso ...

  7. php头函数和浏览器缓存

    可以通过php头函数改变返回给浏览器的头信息 例: 代码中添加头: header("Cache-Control: max-age=31536000"); header(" ...

  8. python中时间和时区

    1.时区 http://blog.csdn.net/cz157733055/article/details/38319195 2.时间 datetime.timedelta代表两个时间之间的的时间差 ...

  9. Bootstrap 3支持IE 8遇到的一个小问题

    使用Bootstrap完成web的UI后,在IE 8运行时,发现.container等class的标签的的宽度并没按预期的宽度显示,本人已经根据bootstrap官方说明 http://getboot ...

  10. 进程内外的session

    进程内session:缺点:当访问量大的时候,会导致进程内session的重启优点:存储速度快 进程外session: 01.将session存储在状态服务器中 asp.net state servi ...