一：jQuery简介
1JQuery是什么？
1.1JavaScript库：封装了很多JS代码
1.2JavaScript库：jQuery(90%)、Ext JS
1.3官方地址：http://jquery.com
2.为什么要学习jQuery?
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
3.JQuery如何使用？
3.1.工具：HBuilder
3.2.使用jQuery步骤
1.下载jQuery库
下载版本：
开发版本：jquery-3.3.1.js
生产版本：jquery-3.3.1.min.js
2.引入：将js文件复制到项目中
3.使用
二：jQuery选择器
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3>2</h3>
<script type="text/javascript">
//加载函数
// $(function(){
// //ID选择器
// //一个属性设置
// $("#ul1").css("clolr","bule");
// //多个属性设置 json
// $("#ul1").css({
// "background":"bule",
// "clolr":"bule"
// })
// });
//类选择器 一组元素
// $(".sb").css("background","bule")
//元素选择器 一组元素
// $("li").css("background","bule")
//通配符选择器
// $("*").css("background","red");
// 群组选择器 可以同时设置多个标签的样式
// $("#ul1,.oBox").css("background","red");
// 设置ul下的子li的字体颜色
// $("#ul1>li").css("color","red");
// 所有后代
// $("#ul1 li").css("color","red")
// 过滤选择器的使用
// :first 获取第一个节点
// $("#ul1>li:first").css("background","red");
// :last 获取最后一个节点
// $("#ul1>li:last").css("background","red");
// 获取指定的节点 下标
// $("#ul1>li:eq(2)").css("background","yellow");
// even 奇数 过滤下标为偶数，位置为奇数的标签
// $("#ul1>li:even").css("background","yellow");
// odd 偶数 过滤下标为奇数，位置为偶数的标签
// $("#ul1>li:odd").css("background","yellow");
// gt() 大于 不包括自己
// $("#ul1>li:gt(2)").css("background","yellow");
// lt() 小于不包括自己
// $("#ul1>li:lt(2)").css("background","yellow");
// 区间设置背景颜色
// 设置item2 item3 item4 背景 1 2 3
// 注意事项：如果gt和lt混合使用，并且gt在前，那么获取后元素的下标胡i重新编号。
// $("#ul1>li:gt(0):lt(3)").css("background","yellow");
// lt在前
// $("#ul1>li:lt(4):gt(0)").css("background","yellow");
// 案例：隔行换颜色
// $("table>tbody>tr:gt(0):even").css("background","red")
$("table tr:gt(0):even").css("background", "red");
$("table tr:gt(0):odd").css("background", "yellow");
// 找到包含YANGWENGUANG内容的li标签设置背景
// $("#ul1>li:contains('YANGWENGUANG')").css("background","yellow")
// 表单选择器
// $(":input").css("background","red");
// $("form>input:input").css("background","red");
// 获取普通文本
// $("form>input:input:text").css("background","red");
// 单选
// console.log($("#demo1>input:radio"));
// 获取选中
// console.log($("#demo1>input:radio:checked"));
// 获取value
// console.log($("#demo1>input:radio:checked").val());
// 复选框
// console.log($("#demo2>input:checkbox"));
// 获取选中的复选框
console.log($("#demo2>input:checkbox:checked"));
// each方法
//
$("#demo2>input:checkbox:checked").each(function() {
console.log($(this).val());
});
//
var checkboxs = $("#demo2>input:checkbox:checked");
// i 下标
// k 元素
$.each(checkboxs, function(i, k) {
// console.log(i,k);
console.log($(k).val())
});
});
</script>
<ul id="ul1">
<li>item1</li>
<p>hehe</p>
<li class="sb">item2</li>
<li>item3</li>
<span>heihei</span>
<li>item4 YANGWENGUANG</li>
<li class="sb">item5</li>
<p>lvelve</p>
<ol>
<li>abc1</li>
<li>abc2</li>
<li>abc3</li>
<li>abc4</li>
<li>abc5</li>
</ol>
</ul>
<hr>
<div class="oBox">
我是div
</div>
<hr>
<h4>表格隔行换颜色</h4>
<table border="1" width="100%" height="400">
<tr style="background-color: gray;">
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<hr>
<h4>表单选择器</h4>
<form action="">
<input type="text">
<input type="password">
<input type="radio">
<input type="checkbox">
<input type="file">
<input type="text">
<input type="submit">
<input type="reset">
<input type="password">
<input type="image">
<select name="" id="">
<option value=""></option>
</select>
<textarea rows="12" cols="4"></textarea>
</form>
<input type="text">
<hr>
<div id="demo1" style="width: 200px;height: 200px;border: 1px solid red;">
<input checked="checked" type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
<input type="text">
</div>
<hr>
<div id="demo2" style="width: 200px;height: 200px;border: 1px solid red;">
<input type="checkbox" value="杨文广">杨文广
<input checked="checked" type="checkbox" value="李小鹏">李小鹏
<input type="checkbox" value="沪青棒">沪青棒
<input checked="checked" type="checkbox" value="写开进">写开进
<input checked="checked" type="checkbox" value="等延康">等延康
<input type="text">
</div>
</body>
</html>
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
