3.1jQuery的工厂函数
jQuery的工厂函数是
。
在
j
Q
u
e
r
y
中
,
无
论
使
用
哪
种
类
型
的
选
择
符
都
需
要
从
一
个
“
。 在jQuery中,无论使用哪种类型的选择符都需要从一个“
。在jQuery中,无论使用哪种类型的选择符都需要从一个“”符号和一对“()”开始。在“()”中通常使用字符串参数,参数中可以包含任何CSS选择符表达式。
(1)在参数中使用标记名;
$("div"):用于获取文档中全部的<div>.
(2)在参数中使用ID
$("#username"):用于获取文档中ID属性值为username的一个元素。
(3)在参数中使用CSS类名
$(".btn_grey"):用于获取文档中使用CSS类名为btn_grey的所有元素。
3.2jQuery选择器是什么
jQuery选择器是jQuery库中非常重要的部分之一。
3.3jQuery选择器的优势
与传统的JavaScript获取页面元素和编写事物相比,jQuery选择器具有明显的优势,包括:
1、代码更简单;
2、支持CSS1到CSS3选择器;
3、完善的检测机制。
例如使用jQuery获取网页中不存在的元素也不会报错:
<div>测试这个页面</div>
<script>
alert($("#mr").val()); //无需判断$("#mr")是否存在
</script>
所以有了jQuery的这个防护措施,即使以后因为某种原因删除了网页上曾经使用过的元素,也不用担心网页的JavaScript代码会报错。 $("#mr")获取的是jQuery对象,.val()用来返回或设置被选元素的value属性值。
3.4 基本选择器
jQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。
3.4.1 ID选择器(#id)
ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以jQuery包装集的形式返回给对象。
ID选择器的使用方法:
$("#id");
id为要查询元素的ID属性值。
【例】在页面添加一个ID属性值为testInput的文本输入框和一个按钮,通过单击按钮来获取在文本输入框中输入的值
首先要先引入jQuery库
<script language="javascript" src="js/jquery-3.4.1.min.js"></script>
<input type="text" id="testInput" name="test" value="" />
<input type="button" value="输入的值为" />
<script>
$(document).ready(function(){
$("input[type='button']").click(function(){ //为按钮绑定单击事件
var inputValue=$("#testInput").val(); //获取文本输入框的值
alert(inputValue);
});
});
</script>
3.4.2 元素选择器(element)
元素选择器是根据元素名称匹配相应的元素。通俗地讲元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。通过元素选择器匹配到的元素是可能有多个的,也可能只有一个。多数情况下,元素选择器匹配的是一组元素。
元素选择器的使用方法:
$("element");
【例】在页面中添加两个
<div>这里种植了一颗草莓</div>
<div>这里养了一条鱼</div>
<input type="button" id="button" value="若干年后" />
<script>
$(document).ready(function(){
$("#button").click(function(){ //为按钮绑定单击事件
$("div").eq(0).html("这里长出了一片草莓");
//获取第一个div元素
$("div").get(1).innerHTML="这里的鱼没有了";
//获取第二个div元素
});
});
</script>
3.4.3 类名选择器(.class)
类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中可以有多个CSS类,一个CSS类又可以匹配多个元素,如果元素中有一个匹配的类的名称就可以被类名选择器选取到。
类名选择器的使用方法:
$(".class");