jQuery_01入门
一、了解什么是jQuery
1.解释： j:javascript Query: 查询
2.jQuery是JavaScript的类库：封装了很多JS代码
3.官方地址：jQuery
4.查看官方jQueryLOGO：write less，do more（写得少，做得多）
二、jQuery的作用
- 为了简化JavaScript开发
- 提供了大量的选择器，更加方便地获取元素
- CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
三、使用jQuery的步骤
1.下载jQuery库
开发版本：jquery-3.3.1.js（所占内存较大，电脑负荷大）
生产版本：jquery-3.3.1.min.js（所占内存较小，电脑负荷比较小）
2.引入：将js文件复制到项目中
3.使用
通过script标签的src属性引用
注：如果一个script标签中有src属性并且有值，那么该标签中不能再次编写代码
4.CDN远程服务的导入
减轻当前程序服务器的压力
(1).在主页搜素jQuery
(2).选择版本复制<script>标签
(3).通过script标签的src属性引用
四、js与jQuery的对比
- Js获取输入框的值（代码使用过多）
2 . jQuery获取输入框的值（减少代码的使用）
五、基本选择器
1.ID选择器：#ID
// id选择器的使用设置单个对象
例：$("#odiv").css("background","red");
//为多个对象设置css样式
例：$("#odiv").css({"background":"yellow","width":"100px","height":"80px"})
2.类选择器：.class
// 类选择器的使用
例：$(".oli").css("background","orange");
3.元素选择器:element
// 标签选择器的使用
例： $("p").css("background","blue");
4.通配符：*
// 通配符选择器
例：$("*").css("background","green");
5.多个选择器(并集)：selector1,selector2
//并集选择器中的选择器可以是多样的（分组选择器）
例： $(".obox1,.obox2,p").css("background","green");
6.多个选择器(交集)：selector1 selector2
// 交集选择器（后代选择器）
例： $(".obox1 p").css("background","red");
7. 结合使用
例：$(".obox1 span,obox2").css("background","yellow");
六、层次选择器
1.层次选择器的使用（层次后代选择器）
例： $("#mydemo li").css("background","pink");
2. 层次选择器的使用（层次子代选择器）
例： $("#mydemo>li").css("background","pink");
七、过滤选择器
1.获取第一个子节点
例： $("#mydemo>li:first").css("background","blue");
8
2. 获取最后个子节点
例：$("#mydemo>li:last").css("background","red");
3.获取所有个子节点
例：$("#mydemo:last").css("background","red");
4.根据下标获取指定的子元素eq()
例：$("#mydemo>li:eq(1)").css("background","red");
5. even匹配首页索引值为偶数的元素，元素位置为奇数
例： $("#mydemo>li:even").css("background","yellow");
6.odd匹配首页索引值为奇数的元素，元素位置为偶数
例： $("#mydemo>li:odd").css("background","pink");
7. >大于 <小于
// 设置tr下标大于2的所有tr设置背景颜色
例： $("table tr:gt(2)").css("background","pink");
// 设置tr下标小于4的所有tr设置背景颜色
例： $("table tr:lt(4)").css("background","green");
8.表格隔行换颜色
$("table tr:even").css("background","yellow");
$("table tr:odd").css("background","pink");
(1.)// 设置tr下标小于4的所有tr设置背景颜色
// $("table tr:lt(4)").css("background","green");
(2.) // 设置tr下标大于2小于4的所有tr设置背景颜色
// $("table tr:lt(4):gt(2)").css("background", "green");
(3.) 注：如果是区间先大于的情况下会再次排布下标
$("table tr:gt(2):lt(4)").css("background", "green");
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 导入jQuery库 -->
<script src="js/jquery-3.3.1.min.js" type="text/javascript">
</script>
<script type="text/javascript">
// jQuery中提供了很多选择器为了更加方便的获取元素
// 加载函数
$(function() {
// id选择器的使用
// $("#odiv").css("background","red");
//为多个对象设置css样式
// $("#odiv").css({"background":"yellow","width":"100px","height":"80px"})
// 类选择器的使用
// $(".oli").css("background","orange");
// 标签选择器的使用
// $("p").css("background","blue");
// 通配符选择器
// $("*").css("background","green");
//并集选择器中的选择器可以是多样的（分组选择器）
// $(".obox1,.obox2,p").css("background","green");
// 交集选择器（后代选择器）
// $(".obox1 p").css("background","red");
// 结合使用
// $(".obox1 span,obox2").css("background","yellow");
// 层次选择器的使用（层次后代选择器）
// $("#mydemo li").css("background","pink");
// 层次选择器的使用（层次子代选择器）
// $("#mydemo>li").css("background","pink");
// jQuery中的过滤选择器
// 获取第一个子节点
// $("#mydemo>li:first").css("background","blue");
// 获取最后个子节点
// $("#mydemo>li:last").css("background","red");
// 获取所有个子节点
// $("#mydemo:last").css("background","red");
// 根据下标获取指定的子元素eq()
// $("#mydemo>li:eq(1)").css("background","red");
// even匹配首页索引值为偶数的元素，元素位置为奇数
// $("#mydemo>li:even").css("background","yellow");
// odd匹配首页索引值为奇数的元素，元素位置为偶数
// $("#mydemo>li:odd").css("background","pink");
// 表格隔行换颜色
// $("table tr:even").css("background","yellow");
// $("table tr:odd").css("background","pink");
// >大于 <小于
// 设置tr下标大于2的所有tr设置背景颜色
// $("table tr:gt(2)").css("background","pink");
// 设置tr下标小于4的所有tr设置背景颜色
// $("table tr:lt(4)").css("background","green");
// 设置tr下标大于2小于4的所有tr设置背景颜色
// $("table tr:lt(4):gt(2)").css("background", "green");
// 注：如果是区间先大于的情况下会再次排布下标
$("table tr:gt(2):lt(4)").css("background", "green");
})
</script>
</head>
<body>
<div id="odiv">
我是div内容
</div>
<p>
p段落标签
</p>
<br>
<ul>
<li>item1</li>
<li class="oli">item2</li>
<li>item3</li>
<li class="oli">item4</li>
<li class="oli">item5</li>
</ul>
<hr>
<div class="obox1">
1
<p>0<span>span内容</span></p>
<span>9</span>
<p>8</p>
</div>
<hr>
<div class="obox2">
2
</div>
<hr>
<ul id="mydemo">
<li>1</li>
<li>2</li>
<li>3</li>
<span>4</span>
<p>5</p>
<ol>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ol>
</ul>
<hr>
<table border="1" width="100%" height="300px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
八、表单选择器
1. 表单的使用
例 ：$("form input:input").css("background","red");
例： $(":text").css("background","yellow");
2.获取单选按钮设置value属性
例：$(":radio").val("女");
3./获取选中的单选val
例：console.log($("#odiv input:checked").val());
4.获取所有复选框的vaule属性值
例： var cks = $(".obox input:checkbox").val();
5.jQuery中遍历方式
例：$.each(cks,function(){
console.log($(this).val())
})
$.each(cks,function(){
if($(this).prop('checked'==true)){
console.log($(this).val())
}
})
6.获取下拉框的值选中的值
例：$(".obox2 select option").each(function(){
if($(this).prop('selected')==true){
console.log($(this).val());
}
});
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 在一个语句中不能同时存在js和jquery的语法
// 加载函数
$(document).ready(function(){
// 表单的使用
// $("form input:input").css("background","red");
// $(":text").css("background","yellow");
// 获取单选按钮设置value属性
// $(":radio").val("女");
//获取选中的单选val
// console.log($("#odiv input:checked").val());
// 获取所有复选框的vaule属性值
// var cks = $(".obox input:checkbox").val();
//jQuery中遍历方式
// $.each(cks,function(){
// console.log($(this).val())
// })
// $.each(cks,function(){
// if($(this).prop('checked'==true)){
// console.log($(this).val())
// }
// })
// var ckss = $(".obox input:checkbox:checked");
// $.each(ckss,function(){
// if($(this).prop('checked')==true){
// console.log($(this).val())
// }
// });
// 获取复选框选中的值
// $(".obox2 select option").each(function(){
// console.log($(this).val())
// });
// console.log($(".obox2 select option:selected").val());
// 获取下拉框的值选中的值
$(".obox2 select option").each(function(){
if($(this).prop('selected')==true){
console.log($(this).val());
}
});
});
</script>
</head>
<body>
<form action="" method="post">
<input type="text" />
<input type="text" />
<input type="password" />
<input type="radio" value="男"/>男
<input type="checkbox" />
<input type="file" />
<input type="image" />
<input type="submit" />
</form>
<div id="" style="width: 100px; height: 50px; border:1px solid aqua;">
</div>
<div id="odiv">
<input checked="checked" type="radio" name="sex" />男
<input type="radio" name="sex" />女
</div>
<div class="obox">
<input type="checkbox" value="1" />1
<input checked="checked" type="checkbox" value="2" />2
<input type="checkbox" value="3" />3
<input checked="checked" type="checkbox" value="4" />4
<input type="checkbox" value="5" />5
</div>
<div class="obox2">
<select name="">
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
</select>
</div>
</body>
</html>
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
