jQuery (1)
2021-02-19 22:18
标签：隐式 选择 type 匹配 element ext 选中 字符 ddd 初识jQuery jQuery (1) 标签：隐式 选择 type 匹配 element ext 选中 字符 ddd 原文地址：https://www.cnblogs.com/fsg6/p/12927325.html 1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="UTF-8">
6 title>01_初识jQuerytitle>
7
8
9 script type="text/javascript">
10 window.onload = function () {
11 var btn1 = document.getElementById(‘btn1‘)
12 btn1.onclick = function () {
13 var username = document.getElementById(‘username‘).value
14 alert(username)
15 }
16 }
17 script>
18
19
20
21 script type="text/javascript" src="js/jquery-1.12.3.js">script>
22
23
24 script type="text/javascript">
25 //绑定文档加载完成的监听
26 jQuery(function () {
27 var $btn2 = $(‘#btn2‘) //jQuery核心对象
28 $btn2.click(function () { // 给btn2绑定点击监听
29 var username = $(‘#username‘).val()
30 alert(username)
31 })
32 })
33
34 /*
35 1. 使用jQuery核心函数: $/jQuery
36 2. 使用jQuery核心对象: 执行$()返回的对象
37 */
38 //新的注释
39 script>
40 head>
41 body>
42
45
46 用户名: input type="text" id="username">
47 button id="btn1">确定(原生版)button>
48 button id="btn2">确定(jQuery版)button>
49
50 body>
51
52 html>
1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="UTF-8">
6 title>jQuery的二把利器title>
7 head>
8 body>
9 button>测试button>
10
22
23 script type="text/javascript" src="js/jquery-1.12.3.js">script>
24 script type="text/javascript">
25 //1. jQuery函数: 直接可用
26 console.log($, typeof $)
27 console.log(jQuery===$) // true
28 //2. jQuery对象: 执行jQuery函数得到它
29 console.log($() instanceof Object) // true
30 /*
31 (function (window) {
32 var jQuery = function () {
33 return new xxx()
34 }
35
36 window.$ = window.jQuery = jQuery
37 })(window)
38 */
39 script>
40 body>
41 html>
1 DOCTYPE html>
2 html>
3 head>
4 meta charset="UTF-8">
5 title>03_jQuery核心函数title>
6 head>
7
8 body>
9
10 div>
11 button id="btn">测试button>
12 br/>
13
14 input type="text" name="msg1"/>br/>
15 input type="text" name="msg2"/>br/>
16
17 div>
18
19
20
30 script src="js/jquery-1.10.1.js" type="text/javascript">script>
31 script type="text/javascript">
32 /*
33 需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框
34 需求2. 遍历输出数组中所有元素值
35 需求3. 去掉" my atguigu "两端的空格
36 */
37 /*需求1. 点击按钮: 显示按钮的文本, 显示一个新的输入框*/
38 //1.1). 参数为函数 : 当DOM加载完成后，执行此回调函数
39 $(function () { // 绑定文档加载完成的监听
40 // 1.2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
41 $(‘#btn‘).click(function () { // 绑定点击事件监听
42 // this是什么? 发生事件的dom元素(
43 // alert(this.innerHTML)
44 // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
45 alert($(this).html()) //获取标签的文本
46 // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
47 $(‘
‘).appendTo(‘div‘) //将创建的标签对象添加到父元素中
48 })
49 })
50
51 /*需求2. 遍历输出数组中所有元素值*/
52 var arr = [2, 4, 7]
53 // 1). $.each() : 隐式遍历数组
54 $.each(arr, function (index, item) {
55 console.log(index, item)
56 })
57 // 2). $.trim() : 去除两端的空格
58 var str = ‘ my ‘
59 // console.log(‘---‘+str.trim()+‘---‘)
60 console.log(‘---‘+$.trim(str)+‘---‘)
61
62 script>
63 body>
64
65 html> 1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="UTF-8">
6 title>04_jQuery对象title>
7 head>
8
9 body>
10 button>测试一button>
11 button>测试二button>
12 button id="btn3">测试三button>
13 button>测试四button>
14
15
23 script src="js/jquery-1.10.1.js" type="text/javascript">script>
24 script type="text/javascript">
25
26 /*
27 需求:
28 需求1. 统计一共有多少个按钮
29 需求2. 取出第2个button的文本
30 需求3. 输出所有button标签的文本
31 需求4. 输出‘测试三‘按钮是所有按钮中的第几个
32 */
33 //需求1. 统计一共有多少个按钮
34 var $buttons = $(‘button‘)
35 /*size()/length: 包含的DOM元素个数*/
36 console.log($buttons.size(), $buttons.length)
37
38 //需求2. 取出第2个button的文本
39 /*[index]/get(index): 得到对应位置的DOM元素*/
40 console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)
41
42 //需求3. 输出所有button标签的文本
43 /*each(): 遍历包含的所有DOM元素*/
44 /*$buttons.each(function (index, domEle) {
45 console.log(index, domEle.innerHTML, this)
46 })*/
47 $buttons.each(function () {
48 console.log(this.innerHTML) //简写，this就是每个button
49 })
50
51 // $.each($buttons, function(){
52 // console.log(this.innerHTML)
53 // })
54
55
56 //需求4. 输出‘测试三‘按钮是所有按钮中的第几个
57 /*index(): 得到在所在兄弟元素中的下标*/
58 console.log($(‘#btn3‘).index()) //2
59
60 /*
61 1. 伪数组
62 * Object对象
63 * length属性
64 * 数值下标属性
65 * 没有数组特别的方法: forEach(), push(), pop(), splice()
66 */
67 console.log($buttons instanceof Array) // false
68 // 自定义一个伪数组
69 var weiArr = {}
70 weiArr.length = 0
71 weiArr[0] = ‘atguigu‘
72 weiArr.length = 1
73 weiArr[1] = 123
74 weiArr.length = 2
75 for (var i = 0; i weiArr.length; i++) {
76 var obj = weiArr[i]
77 console.log(i, obj)
78 }
79 console.log(weiArr.forEach, $buttons.forEach) //undefined, undefined
80
81 script>
82 body>
83 html>
1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="UTF-8">
6 title>05_基本选择器title>
7 head>
8
9 body>
10 div id="div1" class="box">div1(class="box")div>
11 div id="div2" class="box">div2(class="box")div>
12 div id="div3">div3div>
13 span class="box">span(class="box")span>
14
15 br>
16 ul>
17 li>AAAAAli>
18 li title="hello">BBBBB(title="hello")li>
19 li class="box">CCCCC(class="box")li>
20 li title="hello">DDDDDD(title="hello")li>
21 ul>
22
23
36 script src="js/jquery-1.10.1.js" type="text/javascript">script>
37 script type="text/javascript">
38 /*
39 需求:
40 1. 选择id为div1的元素
41 2. 选择所有的div元素
42 3. 选择所有class属性为box的元素
43 4. 选择所有的div和span元素
44 5. 选择所有class属性为box的div元素
45 */
46 //1. 选择id为div1的元素
47 // $(‘#div1‘).css(‘background‘, ‘red‘)
48
49 //2. 选择所有的div元素
50 // $(‘div‘).css(‘background‘, ‘red‘)
51
52 //3. 选择所有class属性为box的元素
53 //$(‘.box‘).css(‘background‘, ‘red‘)
54
55 //4. 选择所有的div和span元素
56 // $(‘div,span‘).css(‘background‘, ‘red‘)
57
58 //5. 选择所有class属性为box的div元素
59 //$(‘div.box‘).css(‘background‘, ‘red‘)
60
61 // 整个页面
62 //$(‘*‘).css(‘background‘, ‘red‘)
63
64 script>
65 body>
66
67 html>
1 DOCTYPE html>
2 html>
3
4 head>
5 meta charset="UTF-8">
6 title>06_层次选择器title>
7 head>
8
9 body>
10 ul>
11 li>AAAAAli>
12 li class="box">CCCCCli>
13 li title="hello">span>BBBBBspan>li>
14 li title="hello">span class="box">DDDDspan>li>
15 span>EEEEEspan>
16 ul>
17
18
29
30 script src="js/jquery-1.10.1.js" type="text/javascript">script>
31 script type="text/javascript">
32 /*
33 需求:
34 1. 选中ul下所有的的span
35 2. 选中ul下所有的子元素span
36 3. 选中class为box的下一个li
37 4. 选中ul下的class为box的元素后面的所有兄弟元素
38 */
39
40 //1. 选中ul下所有的的span
41 // $(‘ul span‘).css(‘background‘, ‘yellow‘)
42
43 //2. 选中ul下所有的子元素span
44 // $(‘ul>span‘).css(‘background‘, ‘yellow‘)
45
46 //3. 选中class为box的下一个li
47 // $(‘.box+li‘).css(‘background‘, ‘yellow‘)
48
49 //4. 选中ul下的class为box的元素后面的所有兄弟元素
50 $(‘ul .box~*‘).css(‘background‘, ‘yellow‘)
51 script>
52 body>
53 html>