jQuery_01（入门&选择器）

1.jQuery是什么？

j：代表的就是 JavaScript

Query： 代表的是 查询

2.为什么学习jQuery并且它能学到什么？

1.为了简化JavaScript开发

2.能学习一些选择器，CSS，HTML时间处理，JS动画，浏览器兼容，丰富插件

3.jQuery在哪些情况下使用？

1.中大型网站开发

2.一些前端框架的基础，比如EasyUI

4.使用jQuery步骤

1.下载jQuery库：

①开发版本：jquery-3.3.1.js

②生产版本：jquery-3.3.1.min.js

2.将js文件复制到项目中

3.使用即可

5.jQuery选择器

常用选择器：

①ID选择器 #myDiv

查找 ID 为"myDiv"的元素。

HTML 代码:
<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:
$("#myDiv");

结果:
[ <div id="myDiv">id="myDiv"</div> ]

②类选择器  .myClass

HTML 代码:
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:
$(".myClass");

结果:
[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

 ③元素选择器 element

查找一个 DIV 元素。

HTML 代码:
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:
$("div");

结果:
[ <div>DIV1</div>, <div>DIV2</div> ]

④通配符 * 

找到每一个元素

HTML 代码:
<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:
$("*")

结果:
[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

⑤ selector1,selector2,selectorN

selector1：一个有效的选择器

selector2：另一个有效的选择器

selectorN：任意多个有效选择器

找到匹配任意一个类的元素。

HTML 代码:
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:
$("div,span,p.myClass")

结果:
[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

过滤选择器

①获取第一个元素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 代码:
$('li:first');

结果:
[ <li>list item 1</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 代码:
$('li:last')

结果:
[ <li>list item 5</li> ]

③获取偶素下标元素even

查找表格的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 代码:
$("tr:even")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

④获取奇数下标元素odd

查找表格的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 代码:
$("tr:odd")

结果:
[ <tr><td>Value 1</td></tr> ]

⑤ 获取某一范围元素 gt大于 lt小于

gt查找第二第三行，即索引值是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 代码:
$("tr:gt(0)")

结果:
[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

lt查找第一第二行，即索引值是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 代码:
$("tr:lt(2)")

结果:
[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

表单选择器

①获取选择单选框|复选框的值

概述
匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)


示例
描述:
查找所有选中的复选框元素

HTML 代码:
<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码:
$("input:checked")

结果:
[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

②获取所选择下拉值

查找所有选中的选项元素

HTML 代码:
<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代码:
$("select option:selected")

结果:
[ <option value="2" selected="selected">Gardens</option> ]