jQuery总结和使用

Posted 2022-06-07 尔嵘

1.jQuery是什么？

jQuery是一个快速、小且功能丰富的javascript库。它使html文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并提供了一个跨多种浏览器的易于使用的API。

jQuery 库包含以下特性：

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities

2.jQuery的安装和使用？

（1）下载到本地，并且根据本地路径引入：

 <script src="jquery.js"></script>

（2）通过CDN方式引入：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

3.jQuery中的"$"和$(function())代表什么，如何使用？

"$" 是指标识符，让浏览器能知道这是jQuery，你完全可以使用jQuery代替"$";

"$(function())"是指等同于$(document).ready(function() 具体方法体 );作用是告诉浏览器当DOM结构完成后便执行这个方法，不同于onload，onload是内容加载完成后。我们常常在$(function())中进行页面的初始化操作。

4.jQuery的初始化？

• $(document).ready(function() console.log("方法1") )

• $(function() console.log("方法2") )

•  jQuery(function($)  console.log("方法3") )

5.jQuery的选择器

根据id获取：$("#gboy")

根据class获取：$(".zhangying")

根据input标签获取元素：$("input")

根据标签+class获取：$("p.demo")

根据多兄弟同类型标签的位置获取：$("ul li:first") 、$("#fal input:last")

:first	找到第一个元素
:last	找到最后一个元素
:eq	匹配一个给定索引值的元素单个元素
:even	匹配所有索引值为偶数的元素集合
:odd	匹配所有索引值为奇数的元素集合
:gt(index)	匹配所有大于给定索引值的元素集合
:lt(index)	匹配所有小于给定索引值的元素集合
:not	去除所有与给定选择器匹配的元素集合
:animated	选取当前正在执行动画的所有元素集合
:focus	选取当前正在获取焦点的元素集合

根据父级和class获取：$("div#intro .head")

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

$(this) 当前选择的元素

6.jQuery的css方法

$(".container").css(
        "color": "#f0f0f0",
        "backgroundColor": "#060",
        "fontSize": "18px",
)

7.jQuery操作表单：

<input type="text" class="form-control" name="urlServerHost" value="" style="width: 150px;" />

<input id="checkbox1" type="checkbox" name="enableChuan" value="" />

• 获取input的value：

$("input[name='urlServerHost']").val()

• 设置input的value：

$("input[name='urlServerHost']").val(res.data.TsNetParameter.UrlServer)

• 判断checkbox的状态：

if ($("input:checkbox[name=enableChuan]").is(':checked')) 

• 设置checkbox的状态：

$("input:checkbox[name=enableChuan]").prop("checked", true)

• 获取select_option的当前值：

$("select[name='net_type']").find("option:selected").val()

• 设置select_option某一项选中状态：

$("select[name='net_type'] option[value= 10]").prop("selected", "selected");