其他分享
首页 > 其他分享> > jquery基础

jquery基础

作者:互联网

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <script src="./js/jquery-3.3.1.min.js"></script>
 8     <title>Document</title>
 9     <script>
10         // 采用等于号赋值的方式,缺点:只加载最后一个
11         window.onload = function(){
12             console.log(0)
13         }
14 
15         // $(document).ready(function(){
16 
17         // })
18         // // 简写为
19         // $().ready(function(){
20             
21         // })
22         // // 再简写为
23         // $(function(){
24             
25         // })
26 
27         // alert();
28         // 全称为:window.alert()
29         // function a(){
30 
31         // }
32         // console.log(window)
33         // 
34         // js=>jq
35         // $() 工厂函数  jq= $(js/dom);
36         // 将dom文本包装成jq
37         // jq=$(div)
38         // jq=$("<li>列表</li>")
39 
40         // jq => js
41         // [0]
42         // js = jq[0]
43         // js = $div[0]        $div[0]为jq对象
44 
45         $(function(){
46             // var div = document.querySelector(".div") 原生js
47 
48             // var $div = $("div") 把原生js调用成jq方法
49             var $div = $(".div")
50             // var $div = $("*:last") 过滤器可以单独使用,前面加一个*表示加载前面的所有
51 
52             // :eq 等于
53             // :gt 大于
54             // :lt 小于
55 
56             // $("li:eq(2)").css("color","red")
57             // $("li:gt(2)").css("color","green")
58             // $("li:lt(2)").css("color","blue")
59             // $("li:parent").css("color","red")
60             // has 来验证是否包含子元素
61             // $("li:has(.span)").css("color","red") 选择器
62             $("li:contains(span)").css("color","red")
63         })
64     </script>
65 </head>
66 <body>
67     <div class="div"></div>
68     <ul>
69         <li >列表1</li>
70         <li >列表2</li>
71         <li >列表3<span class="span">span</span></li>
72         <li >列表4</li>
73         <li >列表5</li>
74         <li></li>
75     </ul>
76 </body>
77 </html>

 

闭包:

for (var i = 0; i < 5; i++) {
setTimeout(function(){
console.log(i)
},1000)
}
// 闭包
for (var i = 0; i < 5; i++) {
(function(i){
setTimeout(function(){
console.log(i)
},1000)
}(i))
}

var stu1={
name:"张三",
class:{
name:web211001,
count:40
}
}
// 直接赋值 对象的完全引用
// var stu2=stu1;
// stu1.class.name="web211200"
// stu1.id=10001;
// console.log(stu2);
// 浅拷贝
var stu2={};
stu2.id=stu1.id;
stu2.name=stu1.name;
// 创建一个新对象
stu2.class={}
stu2.class=stu1.class;
stu1.class.name="web211002"

标签:jquery,function,stu1,基础,jq,js,var,div
来源: https://www.cnblogs.com/lvzhnehan/p/15527161.html