• 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>
  • 相关阅读:
    jS Ajax 上传文件报错"Uncaught TypeError: Illegal invocation"
    layer实现关闭弹出层刷新父界面功能详解
    PHP开发APP接口简单签名全过程(二)实际测试
    PHP开发APP接口简单签名全过程(一)
    Laravel 避免 Trying to get property of non-object 错误的六种方法 [新增第六种 data_get]
    在PHP代码中将HTML代码原样输出的方式
    在使用 Laravel Eloquent 模型时,我们要判断取出的结果集是否为空,但我们发现直接使用 is_null 或 empty是无法判段它结果集是否为空的!!!
    使用layer的iframe层提交表单后,需要关闭当前的iframe层,然后刷新父页面的方法
    laravel中如何实现验证码验证及使用
    递归思想的由来
  • 原文地址:https://www.cnblogs.com/fsg6/p/12927325.html
Copyright © 2020-2023  润新知