j Query

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> ]
————————————————
版权声明：本文为CSDN博主「ᴸ’」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_63579794/article/details/123378029