htmledit_views">
jQuery(入门&选择器)
3W1H
JavaScript库:封装了很多JS代码(类库)
jQuery:同样是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它。 官方地址:jQuery
Why?为什么要学习?
查看官方jQueryLOGO:理念write less,do more 为了简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件 适用于中大型网站开发。
How?怎么用?
工具:HBuilderX
案例1:点击按钮获取输入框中的值(JS对比jQuery) 使用jQuery步骤
- 1.下载jQuery库 开发版本:html" title=jquery>jquery-3.3.1.js 生产版本:html" title=jquery>jquery-3.3.1.min.js
- 2.引入:将js文件复制到项目中
- 3.使用
加载函数:
html" title=javascript>javascript"><script type="text/html" title=javascript>javascript">
// 加载函数
// 1.标准写法 $(document).ready(function(){});
// 2.简写写法 $(function(){})
$(function() {
// 获取按钮设置点击事件弹窗
// 这种编写代码的方式称为"链式写法"
$("#btn2").click(function() {
alert(123)
});
});
</script>
jQuery选择器的使用:
html" title=javascript>javascript"><!-- jQuery外部式导入 -->
<script src="js/html" title=jquery>jquery-3.6.0.js" type="text/html" title=javascript>javascript" charset="utf-8"></script>
<script type="text/html" title=javascript>javascript">
$(function() {
//获取ID选择器
$('#oDiv')
//ID选择器 得到一组元素
$('#oDiv').css('background', 'red');
// 元素选择器 得到一组元素
$("li").css("background", "red");
// 类选择器 一组元素
$(".kk").css("background","red");
//设置多个元素样式
// {"属性":"属性值","属性":"属性值"}
$('#oDiv').css({'background':'red','color':'yellow'});
});
</script>
<!-- jQuery的文件的结构 -->
打开jQuery库查看后 有一个基本架构
<script type="text/html" title=javascript>javascript"> (function() { alert('自执行函数'); }()) </script>
上述这种结构称为自执行函数结构,作用就是自己定义调用自己自动执行
其他选择器:
html" title=javascript>javascript"><!-- 外部式导入 -->
<script src="js/html" title=jquery>jquery-3.6.0.js" type="text/html" title=javascript>javascript"></script>
<script type="text/html" title=javascript>javascript">
//加载函数
$(function() {
// 通配符选择器
$("*").css("background", "red");
// 群组选择器 可以同时设置多个标签的样式
$("#ul1,.oBox").css("background", "red");
// 设置ul下的子li的字体颜色
$("#ul1>li").css("background", "red");
// 所有后代(后代选择器)
$("#ul1 li").css("background", "red");
// 过滤选择器,获取第一个元素;
$('#ul1>li:first').css("background", "red");
//获取最后一个元素;
$('#ul1>li:last').css("background", "red");
//gt() 大于给定索引值的元素;大于不包括自己
$("#ul1>li:gt(2)").css("background", "yellow");
// lt() 小于给定索引值的元素;小于不包括自己
$("#ul1>li:lt(2)").css("background", "yellow");
// 获取某一范围元素
// 注意事项:如果gt和lt混合使用,并且gt在前,那么获取后元素的下标i重新编号;
// lt在前。
$('#ul1>li:lt(4):gt(0)').css('background', 'yellow');
// even 奇数 匹配下标为偶数,或者位置为奇数的标签
$('#ul1>li:even').css('background','yellow');
// odd 偶数 匹配下标为奇数,或者位置为偶数的标签
$("#ul1>li:odd").css("background","yellow");
// 获取单选框
console.log($("#demo1>input:radio"));
});
</script>
<body>
<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>
</body>
案例:表格隔行换色
html" title=javascript>javascript"><script src="js/html" title=jquery>jquery-3.3.1.js" type="text/html" title=javascript>javascript" charset="utf-8"></script>
<script type="text/html" title=javascript>javascript">
$(function(){
$("table tr:even").css("background","pink");
$("table tr:odd").css("background","blue");
})
</script>
html" title=javascript>javascript"><body>
<table border="1px" width="50%px">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>