jQuery单词解析
j代表JS
query查询的意思
JQuery写得少，做的事情更多
1.3W1H
1.1是什么
1.2为什么要学习
1.3哪些情况下使用
1.4怎么用
工具：HBuilderX
案例1：点击按钮获取输入框中的值（JS对比jQuery）
<!--javaScript -->
<script type="text/javascript">
window.onload = function(){
//获取按钮
var btn = document.getElementById('aa');
//设置按钮点击事件
aa.onclick= function (){
alert(1);
}
};
</script>
<!-- jQuery -->
<script type="text/javascript">
$(function(){
//链式写法
$("#ab").click(function(){alert(1)});
})
</script>2.jQuery文件结构
2.1打开jQuery库查看后 有一个基本架构
/*
(function(){
}())
上述这种结构称为自执行函数结构，作用就是自己定义调用自己自动执行
*/
// 函数
function add() {
alert(123)
}
// 手动调用
// add();
// 自执行函数的定义
// 闭合函数
(function() {
// alert('自执行函数');
}())3.$和$()
4.jQuery选择器
jQuery中的选择器就是一个标记，为了快速获取指定的标签
jQuery中常见选择器： ID选择器 class选择器 element选择器
子代选择器 后代选择器 相邻兄弟选择器 分组选择器...
<!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>
4334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
