jQuery内置变量&&jQuery选择器(普通,层级,筛选)

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
})