jQuery介绍
JavaScrip Query:
属于前端,作用和js一模一样,里面封装了很多js代码,是一个js代码库。
(并不是全部js代码)
封装的作用:减少代码量
举例:通过id获取组件
js方式:docunment.getElementByld(“id”);
jQuery方式:$("#id");
引入jQuery库:
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
jQuery选择器
1.基本选择器:
id选择器:将id为sa的span标签的背景设为黄色。
$("#sa").css({"background":"yellow"});
类选择器:将div标签里面class的值为sb的文本框标签的背景设为黄色。
$(".sb").css({"background":"yellow"});
标签选择器:将div里面input标签的背景设为黄色。
$("input").css({"background":"yellow"});
*选择器:将整个页面所有标签的背景设为绿色。
$("*").css({"background":"green"});
,选择器:将id为sa的div里面所有input、span标签的背景设为黄色。
$("input,span").css({"background":"yellow"});
2.层级选择器:
、空格选择器:将div标签里面的所有input元素背景设为绿色。
$("div input").css({"background":"green"});
>选择器:将div里面的input子元素背景设为绿色。
$("div>input").css({"background":"green"});
+选择器:将紧跟在div元素后面的第一个input元素背景设为绿色。
$("div+input").css({"background":"green"});
~选择器:将div元素之后的所有与div元素同辈的input元素背景设为绿色。
$("div~input").css({"background":"green"});
3.过滤选择器:
:first选择器:将ul里面的第一个li背景设为绿色。
$("ul li:first").css({"background":"pink"})
:last选择器:将ul里面的最后一个li背景设为蓝色。
$("ul li:last").css({"background":"pink"})
:even选择器:将ul里面下标为偶数的li背景设为绿色。
$("ul li:even").css({"background":"pink"})
:odd选择器:将ul里面下标为奇数的li背景设为红色。
$("ul li:odd").css({"background":"pink"})
:lt选择器:将ul里面下标小于3的li元素的背景设为绿色。
$("ul li:lt(3)").css({"background":"pink"})
:gt选择器:将ul里面下标大于3的li元素背景设为绿色。
$("ul li:gt(3)").css({"background":"pink"})
// 下标大于1 小于4(先小后大)
// $("ul li:lt(4):gt(1)").css({"background":"pink"})
// $("ul li:gt(1):lt(4)").css({"background":"pink"})
:eq选择器:将table表格里面的第二行的背景设为黄色。
$("#mytable tr").eq(1).css({"background":"pink"})
4.表单选择器:
// 获取单选按钮
// 获取所有单选按钮
// var da = $("#form1 :radio");
// 获取选中的单选按钮
// var da = $("#form1 :radio:checked");
// console.info(da.val());
// 获取复选框
// 获取所有复选框
// var da = $("#form1 :checkbox");
// 获取选中的复选框
$("#ok").click(function(){
// var da = $("#form1 :checkbox:checked");
// // 循环遍历da
// $.each(da,function(i,v){// i表示数组da的下标;v表示数组da 的值
// console.info(v.value);
// });
// 获取选择的下拉框的值
var da = $("#form1 option:selected");
console.info(da.text())
5.表格隔行换色案例:
// 给偶数行按钮添加事件
$("#os").click(function(){
$("#mytable tr:odd").css({"background":"pink"})
});
// 给奇数行按钮添加事件
$("#js").click(function(){
$("#mytable tr:even").css({"background":"green"})
})