什么是jquery?
Jquery就是对原生的js代码的封装。所以在使用jquery的时候需要导入jquery的文件。
使用jquery的好处？
使用更少的代码做更多的事情。
image.png
编写第一个jquery程序：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门程序</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div>第一个jquery程序</div>
<input type="button" value="点击" onclick="f1()"/>
<script type="text/javascript">
function f1() {
// document.getElementsByTagName("div")[0].style = "color:red";
jQuery("div").css("color", "red");
}
</script>
</body>
</html>
Jquery的选择器: $和jQuery一样
使用jquery选择器的主要目的就是为了能够快速找到页面上的各个元素。
原生的js中怎么做？
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
在jquery中就要方便的多：使用jquery选择器 ，跟css选择器非常的类似。
1.基本选择器：
- 元素选择器: $(“标签名”)
- id选择器: $(“#id属性值”)
- 类选择器: $(“.class属性值”)
- 通配符选择器:$(“*”) 选择页面中所有的元素
-
选择器组:$(“selector1,selector2...”) 根据多个选择器来选择多个元素
image.png
<input type="text" name="username" id="user" class="gou" value="哈哈"/>
<input type="text" name="email" id="mail" class="gou" value="123@163.com">
<input type="text" name="phone" id="call" class="ph" value="12300000000">
<input type="button" value="点击" onclick="f1()"/>
<script type="text/javascript">
function f1() {
//$("标签名")
// $("input").css("background-color", "green");
// $(".class属性值")
// $(".gou").css("width", "500px");
//$("#id属性值")
// $("#user").css("color", "yellow");
//$("*")
// $("*").css("background-color", "red");
// $("*").css("margin", "0");
//使用选择器组获取前三个input标签, 会将每一个选择器所定位的元素找到
// $("selector1, selector2, ...")
$("#user, #mail, #call").css("background-color", "red");
}
2.层级选择器: $(div span)
$(s1 s2): 选择s1下所有的s2 忽略层级关系
<div>
<span>狗娃被选择</span>
<p><span>铁蛋被选择</span></p>
</div>
<div>狗剩</div>
<span>翠花</span>
$(s1 > s2):选择s1下所有的s2 不忽略层级关系
<div>
<span>狗娃被选择</span>
<p><span>铁蛋</span></p>
</div>
<div>狗剩</div>
<span>翠花</span>
$(s1 + s2):选择s1后第一个s2兄弟节点
<div>
<span>狗娃</span>
<p><span>铁蛋</span></p>
</div>
<p>狗蛋</p>
<span>二狗子</span>
<div>狗剩</div>
<span>翠花被选择</span>
<span>三狗子</span>
$(s1 ~ s2):选择s1后面所有的s2兄弟节点
<div>
<span>狗娃</span>
<p><span>铁蛋</span></p>
</div>
<p>狗蛋</p>
<span>二狗子被选择</span>
<div>狗剩</div>
<span>翠花被选择</span>
<span>三狗子被选择</span>
3.并且选择器
image.png
4.内容包含选择器
<body>
<div>我是<p>中国</p>人</div>
<div>哈哈<span id="person">你是外国人</span></div>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
function f1() {
// 选择文本内容包含中国的div标签
// $("div:contains(中国)").css("color", "red");
// 选择 哈哈你是外国人
// $("div:has(#person)").css("color", "red");
}
</script>
</body>
5.属性选择器
<input type="text" id="id1" class="class1" name="user" value="Java">
<input type="text" id="id2" class="class2" name="pass" value="123">
<input type="text" id="id3" class="class3" name="email" value="1@163.com">
<input type="text" id="id4" class="class4" name="phone" value="15011111777">
<input type="text" id="id5" class="class1" name="username" value="Java"/>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
function f1() {
// $("[属性名]") 查询所有包含该属性名的元素
// $("[type]").css("color", "red");
// $("[属性名=属性值]") 查询某个属性名=属性值的元素
// $("[name=user]").css("background-color", "yellow");
// $("[属性名^=value]") 属性值以value开头
// $("[属性名$=value]") 属性值以value结尾
// $("[name^=use]").css("width", "500px");
// $("[value$=va]").css("font-size", "2em");
// $("[属性名!=value]") 属性名不等于value值
// 如果没有该属性名, 那么默认也会选中
// $("[class!=class2]").css("background-color", "red");
// $("[class][class!=class2]").css("background-color", "red");
// $("[属性名*=value]") 属性值包含value
$("[value*=5]").css("background-color", "red")
}
6.关于复选框、单选框、下拉框的操作
获取被选中的复选框 : checked
image.png
<input type="checkbox" name="hobby" value="Java">Java
<input type="checkbox" name="hobby" value="PHP">PHP
<input type="checkbox" name="hobby" value="C">C
<input type="checkbox" name="hobby" value="C++">C++
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
function f1() {
// alert($("input:checked"));
for (var i = 0; i < $("input:checked").length; i++) {
// 输出每一个被选中的框的value值
alert($("input:checked:eq(" + i + ")").val());
}
}
获取被选中的单选框 :checked
image.png
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
function f1() {
// 获取被选中的单选框的值
alert($("input:checked").val())
}
</script>
获取下拉框的值 : selected
image.png
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>杭州</option>
</select>
<br>
<input type="button" value="点击" onclick="f1()">
<script type="text/javascript">
function f1() {
// 获取下拉框的值
alert($("option:selected").html());
}
</script>
完整代码地址
https://github.com/menglanyingfei/front-end-Learning/tree/master/jquery/jquery_day01
网友评论