jQuery (1)

初识jQuery

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>01_初识jQuery</title>
 7 
 8   <!--使用原生DOM-->
 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   <!--使用jQuery实现-->
20     <!--本引入-->
21   <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
22     <!--远程引入-->
23   <!--<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>-->
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 <!--
43 需求: 点击"确定"按钮, 提示输入的值
44 -->
45 
46 用户名: <input type="text" id="username">
47 <button id="btn1">确定(原生版)</button>
48 <button id="btn2">确定(jQuery版)</button>
49 
50 </body>
51 
52 </html>

 

jQuery的二把利器
 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 <!--
11 1. jQuery核心函数
12   * 简称: jQuery函数($/jQuery)
13   * jQuery库向外直接暴露的就是$/jQuery
14   * 引入jQuery库后, 直接使用$即可
15     * 当函数用: $(xxx)
16     * 当对象用: $.xxx()
17 2. jQuery核心对象
18   * 简称: jQuery对象
19   * 得到jQuery对象: 执行jQuery函数返回的就是jQuery对象
20   * 使用jQuery对象: $obj.xxx()
21 -->
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>

 

jQuery核心函数
 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 <!--
21 1. 作为一般函数调用: $(param)
22   1). 参数为函数 : 当DOM加载完成后,执行此回调函数
23   2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象
24   3). 参数为DOM对象: 将dom对象封装成jQuery对象
25   4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
26 2. 作为对象使用: $.xxx()
27   1). $.each() : 隐式遍历数组
28   2). $.trim() : 去除两端的空格
29 -->
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元素(<button>)
43       // alert(this.innerHTML)
44       // 1.3). 参数为DOM对象: 将dom对象封装成jQuery对象
45       alert($(this).html())  //获取标签的文本
46       // 1.4). 参数为html标签字符串 (用得少): 创建标签对象并封装成jQuery对象
47       $('<input type="text" name="msg3"/><br/>').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>

 

jQuery对象
 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 <!--
16 1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象
17 2. 基本行为
18   * size()/length: 包含的DOM元素个数
19   * [index]/get(index): 得到对应位置的DOM元素
20   * each(): 遍历包含的所有DOM元素
21   * index(): 得到在所在兄弟元素中的下标
22 -->
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">div3</div>
13 <span class="box">span(class="box")</span>
14 
15 <br>
16 <ul>
17   <li>AAAAA</li>
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 <!--
24 1. 是什么?
25   - 有特定格式的字符串
26 2. 作用
27   - 用来查找特定页面元素
28 3. 基本选择器
29   - #id : id选择器
30   - element : 元素选择器
31   - .class : 属性选择器
32   - * : 任意标签
33   - selector1,selector2,selectorN : 取多个选择器的并集(组合选择器)
34   - selector1selector2selectorN : 取多个选择器的交集(相交选择器)
35 -->
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>AAAAA</li>
12   <li class="box">CCCCC</li>
13   <li title="hello"><span>BBBBB</span></li>
14   <li title="hello"><span class="box">DDDD</span></li>
15   <span>EEEEE</span>
16 </ul>
17 
18 <!--
19 层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
20 1. ancestor descendant
21   在给定的祖先元素下匹配所有的后代元素
22 2. parent>child
23   在给定的父元素下匹配所有的子元素
24 3. prev+next
25   匹配所有紧接在 prev 元素后的 next 元素
26 4. prev~siblings
27   匹配 prev 元素之后的所有 siblings 元素
28 -->
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>

 

posted @ 2020-05-20 23:48  全情海洋  阅读(208)  评论(0编辑  收藏  举报