jQuery内置变量
$
和jQuery
:这两个符号是jQuery类库他所占有的全局变量,也就是说你在没有引入jQuery的时候这两个符号是没有定义的东西,如果你引入jQuery那么这个$
和jQuery
已经是有内容的了(他已经在jQuery内部定义好了jQuery
和$
这两个变量名)
console.log($);//$是已经在jQuery内部定义好了的变量名字,他是一个函数
console.log(jQuery);//jQuery和$是完全一样的函数
那$
和jQuery
是一样的函数(同一个),那么他为什么占用两个变量名呢??
因为jQuery
占用的变量名写起来太麻烦了,他直接用$
字符给代替了,$
是jQuery
的一个别名,他们两个人的功能是一模一样的(他们两个的指针是指向一个函数的)
所以说因为jQuery他占用了
$
和jQuery
这两个变量,所以说后期不要对$
和jQuery
这两个变量,做任何的其他修改,一旦修改对应的功能就会消失
jQuery选择器
在正式写jQuery的代码的时候必须写jQuery的入口代码
如下
$(document).ready(function(){//jQuery的入口代码
//里面可以写真正的jQuery代码了,写jQuery代码的时候必须要写jQuery的入口代码
console.log($('li'))//反会结果是jQueryDOM对象,
//jQueryDOM对象本质上是原生DOM的集合(他本质上是一个类数组)
})
$
("选择器"
) 可以获取到jquery dom元素jquery dom元素 是原生dom的集合
基本选择器
#id选择器
概述
根据给定的ID匹配一个元素。
使用任何的元字符作为名称的文本部分, 它必须被两个反斜杠转义:\。 参见示例。
参数
示例
描述:查找 ID 名为"myDiv"的元素。
HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('#myDiv'));//查找id名为myDiv的元素
})
描述:查找含有特殊字符的元素
HTML 代码:
<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('#foo\\[bar\\]'));//有元字符作为文本的部分,必须用\\反斜杠转义
})
标签名选择器
概述
根据给定的元素标签名匹配所有元素
示例
描述:查找一个 DIV 元素。
HTML 代码:
<div>DIV1</div>
<span>SPAN</span>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('div'));//查找标签是div的元素
})
类名选择器
概述
根据给定的css类名匹配元素。
参数
示例
描述::查找所有类是 “myClass” 的元素.
HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('.myClass'));//查找class名是myClass的选择器
})
通配符(*
号)选择器
概述
匹配所有元素
多用于结合上下文来搜索。
示例
描述:找到每一个元素
HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('*'));//查找页面中所有的元素
})
并列选择器
概述
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内。
参数
示例
描述:找到匹配任意一个类的元素。
HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('div,.myClass,span,.notMyClass'));//查找页面中所有的元素
})
层级选择器
后代选择器
概述
在给定的祖先元素下匹配所有的后代元素
参数
示例
描述:找到表单中所有的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($('form input'));//查找form标签下面的所有input元素
})
子代选择器
概述
在给定的父元素下匹配所有的子元素
参数
示例
描述:匹配表单中所有的子级input元素。
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($("form > input"));//查找form标签下面的子级input元素
})
相邻兄弟选择器
概述
prev + next:表示匹配所有紧接在 prev 元素后的 next 元素
参数
示例
描述:匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($("form + input"));//查找form标签紧跟着的input元素
})
普通兄弟选择器
概述
prev ~ siblings:匹配 prev 元素之后的所有 siblings 元素
参数
示例
描述:找到所有与表单同辈的 input 元素
HTML代码
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
jQuery 代码:
$(document).ready(function(){//jQuery开头代码
console.log($("form ~ input"));//查找form标签同级的input元素
})
筛选选择器
筛选选择器你要用两方面去看
- 冒号前面的是基于当前选择的元素
- 冒号后面的是在次筛选出来
:first
概述
获取第一个元素
示例
描述:获取匹配的第一个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口
console.log($('li:first'))//筛选中第一个li
})
:last()
概述
获取最后个元素
示例
描述:获取匹配的最后个元素
HTML 代码:
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口代码
console.log($('li:last()'))//筛选中最后一个li
})
:even
概述
匹配所有索引值为偶数的元素,从 0 开始计数
示例
描述:查找表格的1、3、5…行(即索引值0、2、4…)
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口
console.log($('tr:even'));//筛选中索引为偶数的tr 索引从0开始
})
:odd
概述
匹配所有索引值为奇数的元素,从 0 开始计数
示例
描述:查找表格的2、4、6行(即索引值1、3、5…)
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口
console.log($('tr:odd'))//筛选中索引为奇数的tr 索引从0开始
})
:eq(index)
概述
匹配一个给定索引值的元素
参数
示例
描述:查找第二行
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$(document).ready(function(){//设置jQuery的出口
console.log($('tr:eq(1)'))//筛选中索引等于1的tr 索引从0开始
})//eq是equal的简写
:gt(index)
概述
匹配所有大于给定索引值的元素
参数
示例
描述:查找第二第三行,即索引值是1和2,也就是比0大
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口
console.log($("tr:gt(0)"))//筛选中索引高于索引0的tr 索引从0开始
})
:lt(index)
概述
匹配所有小于给定索引值的元素
参数
示例
描述:查找第一第二行,即索引值是0和1,也就是比2小
HTML 代码:
<table>
<tr><td>Header 1</td></tr>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
jQuery 代码:
$(document).ready(function(){//设置jQuery出口代码
console.log($('tr:lt(2)'))//筛选中索引底于2的tr 索引从0开始
})
:header
概述
匹配如 h1, h2, h3之类的标题元素
示例
描述:选择到页面上的所有标题标签
HTML 代码:
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
jQuery 代码:
$(document).ready(function(){//设置jQuery开头
console.log($(':header'))//选择到所有的标题标签
})
:focus
概述
匹配当前获取焦点的元素。
如同其他伪类选择器(那些以":
“开始),建议:focus
前面用标记名称或其他选择;否则,通用选择(”*
")是不言而喻的。换句话说,$(':focus')
等同为$('*:focus')
。如果你正在寻找当前的焦点元素,$( document.activeElement )
将检索,而不必搜索整个DOM树。
示例
描述:添加一个
"focused"
的类名给那些有focus方法的元素
HTML代码
<!-- autofocus 自动获取焦点 -->
<!-- 一旦获取到焦点input框中会出现蓝色的边框 -->
<!-- 当页面一开始的时候就能让input框自动获取到焦点 -->
<input type="text" class="focused" autofocus>
<input type="text" class="focused">
jQuery代码
$(document).ready(function(){//设置jQuery出口代码
console.log($('.focused:focus()'))//选到已经焦点的元素
})
:not(selector)
概述
去除所有与给定选择器匹配的元素
在jQuery 1.3中,已经支持复杂选择器了(例如:not(div a) 和 :not(div,a))
参数
示例
描述:查找除了索引位置是2的li元素
HTML代码
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
jQuery代码
$(document).ready(function(){//设置jQuery出口
//选到 除了not(选择器)之外的li元素
console.log($('li:not(:eq(2))'));//查找出来索引位置是2的li
})