logo-jquery-20191111489
前言
jQuery是一个JavaScript代码库（或者JavaScript框架）。jQuery的宗旨是“Write Less，Do more”（写更少的代码，做更多的事情）。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery学习之样式篇
选择器
| 选择器 | 描述 |
|---|---|
| $("parent > child") | 子选择器：选择所有指定的“parent”元素中指定的“child”的直接子元素，相邻上下级关系 |
| $("ancestor descendant") | 后代选择器：选择给定的祖先元素的所有后代元素，包含这个元素的直接子元素或者、孙子、曾孙等 |
| $("prev + next") | 相邻兄弟选择器：选择紧跟在“prev”元素后的“next”元素 |
| $("prev ~ siblings") | 一般兄弟选择器：匹配“prev”元素之后的所有兄弟元素。一般兄弟指具有相同的父元素，并匹配过滤“siblings”选择器 |
| $(":first") | 匹配第一个元素，如$("input:first")找到的是第一个input |
| $(":last") | 匹配最后一个元素 |
| $(":not(selector)") | 选择所有不是给定选择器的元素 |
| $(":eq(index)") | 选择索引值为index的元素 |
| $(":gt(index)") | 选择所有索引值大于index的元素 |
| $(":lt(index)") | 选择所有索引值小于index的元素 |
| $(":even") | 索引值为偶数的元素，从零开始 |
| $(":odd") | 索引值为奇数的元素，从零开始 |
| $(":header") | 选择所有标题元素，如h1，h2等 |
| $(":lang(language)") | 选择指定语言的元素 |
| $(":root") | 选择该文档的根元素 |
| $(":animated") | 所有正在执行动画效果的元素 |
| $(":contains(text)") | 所有包含指定文本的元素，如果匹配的文本包含在其子元素中，同样匹配 |
| $(":has(selector)") | 所有元素中至少包含指定选择器的元素 |
| $(":parent") | 所有包含子元素或者文本的元素 |
| $(":empty") | 所有没有子元素的元素 |
| 选择器 | 描述 |
|---|---|
| $(":visible") | 选择所有显示的元素 |
| $(":hidden") | 选择所有隐藏的元素 |
属性选择器 $("input[name~-'objname']")
$("[attribute|-'value']")选择指定属性值等于给定字符串或以该文字串为前缀（该字符串后跟一个连字符"-"）的元素
| 选择器 | 描述 |
|---|---|
| $("[attribute*='value']") | 选择指定属性包含给定的子字符串的元素 |
| $("[attribute~-'value']") | 选择指定属性用空格分割的值中包含一个给定值的元素 |
| $("[attribute='value']") | 选择指定属性是给定值的元素 |
| $("[attribute!='value']") | 选择指定属性不等于给定值的元素 |
| $("[attribute^='value']") | 选择指定属性是以给定字符串开始的元素 |
|
|
选择指定属性是以给定字符串结尾的元素 |
| $("[attribute]") | 选择所有具有指定属性的元素 |
| $("[attributeFilter1][attributeFilterN]") | 选择匹配所有指定的属性筛选器的元素 |
表单元素选择器
| 选择器 | 描述 |
|---|---|
| $(":input") | 选择所有input，textarea，select和button元素 |
| $(":text") | 所有文本框 |
| $(":password") | 所有密码框 |
| $(":radio") | 所有单选按钮 |
| $(":checkbox") | 所有复选框 |
| $(":submit") | 所有提交按钮 |
| $(":image") | 所有图像域 |
| $(":reset") | 所有重置按钮 |
| $(":button") | 所有按钮 |
| $(":file") | 所有文件域 |
表单对象属性筛选选择器
| 选择器 | 描述 |
|---|---|
| $(":enabled") | 匹配可用的表单元素 |
| $(":disabled") | 匹配不可用的表单元素 |
| $(":checked") | 匹配被选中的 <input>元素 |
| $(":selected") | 匹配被选中的 <option>元素 |
jQuery选择器之特殊选择器this
this和$(this) 的区别？ 答：this 是JavaScript中的关键字，指的是当前的上下文对象，简单的说就是方法/属性的拥有者； eg:
<pre class="prettyprint linenums prettyprinted" style="box-sizing: border-box; overflow: auto !important; font-family: Consolas, Menlo, Courier, monospace; font-size: 10px; background: rgb(29, 31, 33); border: 1px solid rgb(136, 136, 136); padding: 2px; color: rgb(80, 97, 109); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; line-height: 12px;">
var ilucifer = {name:"寒江",getName:funcion(){//this,就是imooc对象return this.name;}}ilucifer .getName();//寒江
</pre>
在JavaScript中this是动态的，即这个上下文对象都是可以被动态改变的(可以通过call,apply等方法) 同样的在DOM中this就是指向了这个html元素对象，因为this就是DOM元素本身的一个引用 通过把$()方法传入当前的元素对象的引用this，把这个this加工成jQuery对象。
结尾
本文整理自慕课网jQuery基础 (一)—样式篇，课程链接：https://www.imooc.com/learn/418； 作者：Aaron艾伦https://www.imooc.com/u/290139/courses?sort=publish 谢谢
欢迎扫描下方二维码，关注weyoung公众号，一起交流学习~~
weyoung公众号
网友评论