这么快就jq了?!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/jquery-3.3.1.min.js"></script>
<title>Document</title>
<script>
// window.onload = function () {
// console.log(0)
// }
// onload = function () {
// console.log(0)
// }
// alert();
// window.alert();
// jquery对象的三种表现形式
// $(document).ready(function(){
// })
// $().ready(function(){
// })
// $(function(){
// })
// js对象转换jq对象
// js => jq
// jq = $(js/dom)
// jq = $(div)
// jq = $("<li>列表</li>")
// jq对象转换成js对象
// [0]
// js = jq[0]
// 例子:
// js = $(div)[0]
// js = $div[0]
$(function () {
// 将js封装为jq
// 简化前
// var div = document.querySelector(".div");
// var $div = $(".div")
// 简化后
var $div = $(".div")
// js封装成jq之前
// div.onclick = function(){
// }
// js封装成jq之后
// $div.click(function(){
// })
$("li:frist")
// eq 代表等于
$("li:eq(2)").css("color", "red")
// gt 代表大于
$("li:gt(2)").css("color", "green")
// lt 代表小于
$("li:lt(2)").css("color", "bule")
// li:eq(2)中li 和 :eq之间不能加空格!!!因为过滤的是li自身所以要紧挨着:eq
// 内容过滤器
// $("li:parent").css("color","red")
// $("li:parent").css("color","red") 文本节点(空格/换行)也可以起作用 用来验证里面有没有东西
//$("li:has(.span)").css("color","red")验证其中有无内容 选择器
//$("li:contain(999)").css("color","red")文本检查 检查的是文本 选择器
//display:none看不见 选择器只识别display:none
})
</script>
</head>
<body>
<div class="div"></div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4<span class="span">999</span></li>
<li>列表5</li>
<li>
</li>
</ul>
</body>
</html>
浙公网安备 33010602011771号