jQuery 01(入门&选择器)

讨厌下雨天。

已于 2022-08-29 16:54:28 修改

阅读量512

点赞数 2

文章标签： jquery javascript

于 2022-03-16 18:17:25 首次发布

本文链接：https://blog.csdn.net/m0_68211831/article/details/123531603

版权

思维导图：

1.js&jQurery对比

js (例如）：

window.οnlοad=function(){
          var btn = document.getElementById("btn");
          //给按钮添加点击事件
          btn.οnclick=function(){//匿名函数
          //拿到文本框的值
          var a = document.getElementById("aa").value;
          alert(aa);
          }
         }

jQurey (例如）：

<--引入外部js=jQuery的类库-->

<--另起一个script块-->

$(function(){//相当于window.onload
var b = $("#btnb");//拿到按钮
               b.click(function(){//添加点击事件
               var a = $("#aa").val();//拿到文本框的值
               alert(a);
               })

2.基本选择器

                 //$("#xx").css("background","yellow");//id选择武器
               // $(".yy").css({"background":"yellow","color":"red"});//类选择器
               // $("div").css("backgroud","pink");//标签选择器=元素选择器
               // $("*").css("backgroud","pink");//通配符：全部
               // $("p,span").css("background","yellow");//并集
               // $("div>span").css("background","yellow");//交集后代span
               // $("div>span").css("background","yellow");//父子关系
               //$("p+sapan").css("background","yellow");//兄弟关系
过滤器:
               // $("ul>li:first").css("background","yellow");//第一个
               // $("ul>li:last").css("background","yellow");//最后一个
               // $("ul>li:even").css("background","yellow");//偶数下标
               // $("ul>li:odd").css("background","yellow");//奇数下标
               // $("ul>li:gt(0)").css("background","yellow");//大于0
               // $("ul>li:lt(4)").css("background","yellow");小于4

案例一：使用过滤器让表格隔行变色

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</style>

<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
//页面载入函数加载DOM
$(function() { //相当于window.onload
$("table tr:even").css("background-color","gold");
$("table tr:odd").css("background-color","aqua");
})
</script>
</head>
<body>
<h4>表格隔行换色</h4>
<table border="1px" width="50%">
<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>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

效果展示：

讨厌下雨天。

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 01(入门&选择器)

1.sj&jQurery对比js (例如）：window.onload=function(){ var btn = document.getElementById("btn"); //给按钮添加点击事件 btn.onclick=function(){//匿名函数 //拿到文本框的值 var a = document.getElementById("aa").v......
复制链接

扫一扫