王明昌博客如果你对该文章中的内容有疑问/不解,可以点击此处链接提问
要注明问题和此文章链接地址 点击此处跳转
什么是jQuery
|
1 |
<span class="hljs-keyword">jQuery </span>是 <span class="hljs-keyword">JavaScript </span>的 类库 |
jQuery特点
|
1 |
写得少 干得多 |
jQuery优势
|
1 2 3 4 5 6 7 |
① 开源 ② 便捷 的 选择器 ③ 方便的dom操作 ④ 丰富的动画操作 ⑤ 简单的ajax操作 ⑥ 兼容性 ⑦ 方便的插件机制 |
jQuery缺点
|
1 |
额外的添加 jQuery文件，增加网络传输量 |
jQuery版本
|
1 2 |
jQuery <span class="hljs-number">1</span><span class="hljs-selector-class">.X</span> 支持IE jQuery <span class="hljs-number">2</span><span class="hljs-selector-class">.X</span> IE9+ 其他... |
jQuery的基本语法
|
1 |
<span class="hljs-symbol"> http:</span><span class="hljs-comment">//jquery.cuishifeng.cn/ [手册]</span> |
jquery标准的使用方式
|
1 2 3 4 5 6 7 8 |
标准入口: $(<span class="hljs-built_in">document</span>).ready(<span class="hljs-function"><span class="hljs-keyword">function</span> ()</span>{ code.... }) 简写: $(<span class="hljs-function"><span class="hljs-keyword">function</span> ()</span>{ code.... }) |
ready和onload的区别
|
1 2 3 4 |
<span class="hljs-number"> 1</span>)<span class="hljs-selector-class">.ready</span> 文档中 DOM加载完 就触发 onload 文档中的一切 加载完 才触发 <span class="hljs-number">2</span>)<span class="hljs-selector-class">.ready</span> 可以绑定多个事件 onload 后面会覆盖前面的绑定 |
链式操作风格
|
1 |
<span class="hljs-selector-tag">dom</span><span class="hljs-selector-class">.css</span>()<span class="hljs-selector-class">.attr</span>()<span class="hljs-selector-class">.remove</span>() |
jQuery dom对象 和 js DOM对象的 区别 以及相互转化
|
1 2 3 |
<span class="hljs-number"> 1</span>).使用原生<span class="hljs-keyword">JS方式 </span>(get Id) <span class="hljs-keyword">JQ的方式 </span> $(selector) <span class="hljs-number">2</span>).<span class="hljs-keyword">js </span>dom --> <span class="hljs-keyword">jq </span>dom $(<span class="hljs-keyword">jsdom) </span> <span class="hljs-keyword">jq </span>dom ---> <span class="hljs-keyword">js </span>dom <span class="hljs-keyword">jqueryDOM[index]</span> |
jquery命名冲突
|
1 |
<span class="hljs-meta">$</span><span class="bash"> 是jQuery的别名</span> |
jQuery的选择器
基本选择器
|
1 2 3 4 5 |
<span class="hljs-comment"> #id</span> .<span class="hljs-built_in">class</span> tagName * selector1,selector2,selectorN |
层级选择器
|
1 2 3 4 |
<span class="hljs-keyword"> selector</span> <span class="hljs-keyword">selector</span> <span class="hljs-keyword">selector</span>><span class="hljs-keyword">selector</span> <span class="hljs-keyword">selector</span>+<span class="hljs-keyword">selector</span> <span class="hljs-keyword">selector</span>~<span class="hljs-keyword">selector</span> |
过滤选择器
|
1 2 3 4 5 6 7 8 9 |
:first 首个 :<span class="hljs-keyword">last</span> 最后一个 :e<span class="hljs-string">q(index)</span> 指定第几个 :<span class="hljs-keyword">lt</span>(<span class="hljs-keyword">index</span>) 索引大于 :<span class="hljs-keyword">gt</span>(<span class="hljs-keyword">index</span>) 索引小于 :even 索引为偶数的 <span class="hljs-number">0</span>算偶数 :odd 索引为奇数 :header 所有的h标签 可以省略:之前的 :<span class="hljs-keyword">not</span>(selector) 排除 |
内容选择器
|
1 2 3 4 |
<span class="hljs-symbol"> :contains</span>(<span class="hljs-name">text</span>) <span class="hljs-symbol">:has</span>(<span class="hljs-name">selector</span>) <span class="hljs-symbol">:parent</span> <span class="hljs-symbol">:empty</span> |
可见性选择器
|
1 2 |
<span class="hljs-symbol"> :hidden</span> <span class="hljs-symbol">:visible</span> |
属性选择器
|
1 2 3 4 5 6 7 |
selector[<span class="hljs-literal">attribute</span>] 选择值有指定属性的元素 selector[<span class="hljs-literal">attribute</span>=<span class="hljs-keyword">value</span>] 指定值 等于 <span class="hljs-keyword">value</span> selector[<span class="hljs-literal">attribute</span>!=<span class="hljs-keyword">value</span>] 指定值 不等于<span class="hljs-keyword">value</span> selector[<span class="hljs-literal">attribute</span>^=<span class="hljs-keyword">value</span>] 属性值 以 <span class="hljs-keyword">value</span>开头 selector[<span class="hljs-literal">attribute</span>$=<span class="hljs-keyword">value</span>] 属性值 以 <span class="hljs-keyword">value</span>结束 selector[<span class="hljs-literal">attribute</span>*=<span class="hljs-keyword">value</span>] 属性值 包含 <span class="hljs-keyword">value</span> selector[][][] 多个属性选择器,进一步筛选使用 |
子元素选择器
|
1 2 3 4 |
<span class="hljs-symbol"> :first-child</span> 是否是首个子元素 <span class="hljs-symbol">:last-child</span> 是否是最后一个子元素 <span class="hljs-symbol">:nth-child</span>(n) 是否为父元素的 第N个子元素 可以做运算 <span class="hljs-symbol">:only-child</span> 是否是 呀un苏唯一的子元素(独苗) |
表单选择器
|
1 2 3 4 5 6 7 8 9 10 11 |
<span class="hljs-selector-pseudo"> :input</span> 所有表单域的元素 <span class="hljs-selector-pseudo">:text</span> <span class="hljs-selector-pseudo">:password</span> <span class="hljs-selector-pseudo">:radio</span> <span class="hljs-selector-pseudo">:checkbox</span> <span class="hljs-selector-pseudo">:submit</span> <span class="hljs-selector-pseudo">:reset</span> <span class="hljs-selector-pseudo">:button</span> <span class="hljs-selector-pseudo">:file</span> <span class="hljs-selector-pseudo">:hidden</span> <span class="hljs-selector-pseudo">:image</span> |
表单对象选择器
|
1 2 3 4 |
<span class="hljs-symbol"> :enabled</span> <span class="hljs-symbol">:disabled</span> <span class="hljs-symbol">:checked</span> <span class="hljs-symbol">:selected</span> |
