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

jquery 基本选择器，

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

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

jquery 层级选择器

  1. <body>
  2. <h1>正确的认知是<em>非常</em>重要的!</h1>
  3. <em>去看看吧!</em>
  4. <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. nyoj 97 兄弟郊游问题

    点击打开链接 兄弟郊游问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 兄弟俩骑车郊游,弟弟先出发,每分钟X米,M分钟后,哥哥带一条狗出发.以每分钟Y米的速度去追弟弟 ...

  2. java类的高级特性

    1.非内部类不能被声明为private 或protected访问类型.

  3. Spring Data Jpa 规范接口表

      Keyword Sample JPQL snippet And findByLastnameAndFirstname … where x.lastname = ?1 and x.firstname ...

  4. ASP.Net软件工程师基础（二）

    1.封装 答:属性封装了字段,通过get和set访问器限制字段对外开放的程度:将重复的代码封装成方法,实现DCR原则(Don't Copy yourself):方法的参数组合可以用类实现,即在方法中不 ...

  5. threading event

    #!usr/bin/env python 2 #coding: utf-8 3 #Author: Andy 4 5 import threading 6 import time 7 8 def pro ...

  6. iOS UIButton 设置图片文字垂直排列

    后面经过测试,如果button的文字长度变更,会导致图片位置变化,经过多次修改UIEdgeInsets的值也没有达到期望效果,最终采用集成UIButton类,重写layoutSubviews函数实现, ...

  7. Unity AssetBundles and Resources指引 （一）

    本文内容主要翻译自下面这篇文章 https://unity3d.com/cn/learn/tutorials/topics/best-practices/guide-assetbundles-and- ...

  8. memcached学习（二）

    Slab Allocation机制:整理内存以便重复使用 最近的memcached默认情况下采用了名为Slab Allocator的机制分配.管理内存. 在该机制出现以前,内存的分配是通过对所有记录简 ...

  9. oracle创建索引后sqlldr导入错误

    SQL*Loader-: Error calling once/load initialization ORA-: Table TABLE_LOG has index defined upon it. ...

  10. org.springframework.beans.factory.BeanDefinitionStoreException

    org.springframework.beans.factory.BeanDefinitionStoreException: Invalid bean definition with name 'd ...