zoukankan      html  css  js  c++  java
  • jQuery简介

    一、jQuery简介

    1. 介绍 

    jQuery是JS的工具库,对原生JS中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善,更便捷的方法。

    中文网址:jquery123.com

    2. 使用 

    1)引入

    先引入jquery文件,才能使用jquery语法

    2)工厂函数 - $()

    "$()"函数用于获取元素节点,创建元素节点或将原生JS对象转换为jquery对象,返回 jQuery 对象。jQuery 对象实际是一个类数组对象,包含了一系列 jQuery 操作的方法。

    例 :

    <!--引入jquery文件-->
    <script src="jquery-1.11.3.js"></script>
    <body>
        <h1 id="d1" class="c1"></h1>
        <p></p>
    </body>
    //$()获取元素节点,需传入字符串的选择器
     $("h1")
     $("#d1")
     $(".c1")
     $("body,h1,p")

    3)原生JS对象与jQuery对象

    原生JS对象与jQuery对象的属性和方法不能混用。可以根据需要,互相转换 :

    1. 原生JS转换jQuery对象

        $(原生对象),返回 jQuery 对象

    2. jQuery对象转换原生JS对象

    方法一 : 根据下标取元素,取出即为原生对象

      var div = $("div")[0];

    方法二 : 使用jQuery的get(index)取原生对象

      var div2 = $("div").get(0);

     1  <!--引入jquery文件-->
     2 <script src="jquery-1.11.3.js"></script>
     3 <script>
     4     window.onload = function(){
     5         //使用jquery获取元素节点
     6         //$('选择器')
     7         console.log($('h1'));//所有h1元素节点全打出来
     8         $('h1').html('Python');//所有h1元素节点修改为Python
     9         console.log($('h1'[0]));//获取原生js对象    <h1>Python</h1>
    10         //原生对象调用原生的方法
    11         $('h1')[0].innerHTML = 'hello';    //第一个h1元素节点修改为hello
    12         console.log($('h1')[0])            
    13         //<h1>jq对象调用jq方法</h1>
    14         //eq(index)返回指定下标对应的jq对象
    15         console.log($('h1').eq(0));        
    16         //<h1>jq对象调用jq方法</h1>
    17         $('h1').eq(0).html('jq对象调用jq方法')//
    18         console.log(#d1');    //<h1 id="d1">Python</h1>
    19         //原生对象转换jquery对象,$(原生)封装
    20         $('#d1').html('包装成jquery对象');
    21         console.log('#d1')        //<h1 id="d1">包装成jquery对象</h1>
    22     }
    23 </script>
    24 <body>
    25     <div>
    26         <h1>python</h1>
    27     </div>
    28     <h1>jquery</h1>
    29     <h1>jquery</h1>
    30     <h1 id="d1">jquery</h1>
    31     <h1>jquery</h1>
    32     <h1>jquery</h1>
    33 </body>
    示例

    4)jQuery获取元素

    jQuery通过选择器获取元素,$("选择器")

    选择器分类 :

    1.基础选择器

    标签选择器:$("div")

    ID 选择器:$("#d1")

    类选择器:$(".c1")

    群组选择器:$("body,p,h1")

     1 <!--引入jquery文件-->
     2 <script src="jquery-1.11.3.js"></script>
     3 <script>
     4     window.onload = function(){
     5     //1.标签选择器
     6     console.log($('h1').html());    //人生苦短(默认是第一个)
     7     //2.id选择器
     8     //css()操作行内样式
     9     $('#d1').css('color','red');
    10     $('#d1').css('text-align','center');    //id=d1 居中红色
    11     }
    12     //3.class选择器
    13     $('.c1').css('color','pink');    //.c1类字体粉色
    14     //4.群组选择器
    15     $('body,h1').css('margin','30');
    16 </script>
    17 <body>
    18     <h1 id="d1" class="c1">人生苦短</h1>
    19     <h1 class="c1">我学Python</h1>
    20     <div id="box">
    21         <span>div->span</span>
    22         <p>
    23             <span>p->span</span>
    24         </p>
    25         <b>测试文本</b>
    26         <span>div->span</span>
    27         <span>div->span</span>
    28     </div>
    29 </body>
    示例

    2.层级选择器

    后代选择器: $("div .c1")

    子代选择器: $("div>span")

    相邻兄弟选择器: $("h1+p")  匹配选择器1后的第一个兄弟元素,同时要求兄弟元素满足选择器2

    通用兄弟选择器: $("h1~h2") 匹配选择器1后所有满足选择器2的兄弟元素

     1 <!--引入jquery文件-->
     2 <script src="jquery-1.11.3.js"></script>
     3 <script>
     4     window.onload = function(){
     5     //1.后代选择器
     6     $('#box span').css('color','red');
     7     //2.子代选择器
     8     $('#box>span').css('background','green');
     9     //3.相邻兄弟选择器
    10     $('#box p+span').css('border','2px solid black');
    11     $('h1+div').css('border','2px solid black');
    12     //4.通用选择器
    13     $('#box p~span').css('font-size','32px');
    14     $('h1:not(#d1)').css('color','#ff0')
    15     }
    16 </script>
    17 <body>
    18     <h1 id="d1" class="c1">人生苦短</h1>
    19     <h1 class="c1">我学Python</h1>
    20     <div id="box">
    21         <span>div->span</span>
    22         <p>
    23             <span>p->span</span>
    24         </p>
    25         <b>测试文本</b>
    26         <span>div->span</span>
    27         <span>div->span</span>
    28     </div>
    29 </body>
    示例

    3.过滤选择器

    需要结合其他选择器使用。

    :first 匹配第一个元素 例:$("p:first")
    :last 匹配最后一个元素 例:$("p:last")
    :odd 匹配奇数下标对应的元素
    :even 匹配偶数下标对应的元素
    :eq(index) 匹配指定下标的元素
    :lt(index) 匹配下标小于index的元素
    :gt(index) 匹配下标大于index的元素
    :not(选择器) 否定筛选,除()中选择器外,其他元素
     1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <!--引入jquery文件-->
     5     <script src="jquery-1.11.3.js"></script>
     6 </head>
     7 <body>
     8     <h1 id="d1">过滤选择器</h1>
     9     <h1>过滤选择器</h1>
    10     <h1>过滤选择器</h1>
    11     <h1 class="c1">过滤选择器</h1>
    12     <h1 class="c1">过滤选择器</h1>
    13     <h1>过滤选择器</h1>
    14     <button id="btn1">:first</button>
    15     <button id="btn2">:last</button>
    16     <button id="btn3">:odd</button>
    17     <button id="btn4">:even</button>
    18     <button id="btn5">:eq()</button>
    19     <button id="btn6">:lt()</button>
    20     <button id="btn7">:gt()</button>
    21     <button id="btn8">:not()</button>
    22     <script>
    23         btn1.onclick = function(){
    24             $('h1:first').css('color','red');
    25         }
    26         btn2.onclick = function(){
    27             $('h1:last').css('color','green');
    28         }
    29         btn3.onclick = function(){
    30             $('h1:odd').css('color','pink');
    31         }
    32         btn4.onclick = function(){
    33             $('h1:even').css('color','blue');
    34         }
    35         btn5.onclick = function(){
    36             $('h1:eq(3)').css('color','#fa3377');
    37         }
    38         btn6.onclick = function(){
    39             $('h1:lt(3)').css('color','#33fa77');
    40         }
    41         btn7.onclick = function(){
    42             $('h1:gt(3)').css('color','#3377fa');
    43         }
    44         btn8.onclick = function(){
    45             //匹配下标部位3的所有h1
    46             //$('h1:not(:eq(3))').css('color','#999');
    47             $('h1:not(#d1,.c1)').css('color','#ff0')
    48         }
    49     </script>
    50 </body>
    示例

    4.属性选择器

    属性选择器以[ ]为标志.

    [attrName] 匹配包含指定属性的元素
    [attrName=value]/[attrName="value"] 匹配属性名=属性值的元素
    [attrName^=value] 匹配属性值以指定字符开头的元素
     [attrName$=value] 匹配属性值以指定字符结尾的元素
    [attrName*=value] 匹配属性值包含指定字符的元素

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <!--引入jquery文件-->
     5     <script src="jquery-1.11.3.js"></script>
     6 </head>
     7 <body>
     8     <h1>我学Python</h1>
     9     <h1 id="d1">人生苦短</h1>
    10     <h1 id="d2">从入门到放弃</h1>
    11     <h1 id="c3">从放弃到绝望</h1>
    12     <h1 id="c4">从放弃到再放弃</h1>
    13     <ul>
    14         <li>列表项</li>
    15         <li>列表项</li>
    16         <li>列表项</li>
    17         <li>列表项</li>
    18     </ul>
    19     <ul>
    20         <li>列表项</li>
    21         <li>列表项</li>
    22         <li>列表项</li>
    23         <li>列表项</li>
    24         <a href=""></a>
    25     </ul>
    26     <script>
    27         console.log($('[id]'));
    28         console.log($("[id='d1']"));
    29         //以d开头的元素
    30         console.log($("[id^=d]"));
    31         //以1结尾的元素
    32         console.log($("[id$=1]"));
    33         //id属性值包含‘d’
    34         console.log($("[id*=c]"));
    35 
    36         //子元素过滤选择器
    37         $('li:first').css('color','red');
    38         $('li:first-child').css('background','green');
    39         $('li:last-child').css('background','orange');
    40         $('li:nth-child(2)').css('text-align','center');
    41     </script>
    42 </body>
    示例

    5.子元素过滤选择器

    :first-child 匹配第一个子元素
    :last-child 匹配最后一个子元素
    :nth-child(n) 匹配第n个子元素(n从1开始计数)

    5)操作元素内容

    html() //设置或读取标签内容,等价于原生innerHTML,可识别标签语法

    text() //设置或读取标签内容,等价于innerText,不能识别标签

    val()  //设置或读取表单元素的值,等价于原生value属性

    6)操作标签属性

    1. attr("attrName","value")

    设置或读取标签属性

    2. prop("attrName","value")

    设置或读取标签属性

    注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写

    3. removeAttr("attrName")

    移除指定属性

    7)操作标签样式

    1. 为元素添加id/class属性,对应选择器样式

    2. 针对类选择器,提供操作class属性值的方法

      addClass("className")    //添加指定的类名

      removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值

      toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

    3. 操作行内样式

      css("属性名","属性值")  //设置行内样

      css(JSON对象)             //设置一组CSS样式

      JSON对象:常用数据传输格式

      语法 :

      {

      "width":"200px",

      "height":"200px",

      "color":"red"

      }

    8)根据层级结构获取元素

    1. parent()

       返回父元素

    2. parents('selector')

        返回满足选择器的祖先元素

    3. children()/children("selector")

        返回所有直接子元素/返回满足选择器的直接子元素

    4. find("selector")

       返回所有的后代元素(包含直接与间接)

    5. next()/next("selector")

       返回下一个兄弟元素/返回下一个兄弟元素,必须满足选择器

    6. prev()/prev("selector")

       返回前一个兄弟元素/返回前一个兄弟元素,要求满足选择器

    7. siblings()/siblings("selector")

       返回所有的兄弟元素/满足选择器的所有兄弟元素

    9)元素的创建,添加,删除

    1. 创建 

      使用$("标签语法"),返回创建好的元素

      var div = $("<div></div>");    //创建元素

      div.html("动态创建").attr("id","d1").css("color","red"); //链式调用,设置内容和属性

      var h1 = $("<h1 id='d1'>一级标题</h1>");        //创建的同时设置内容,属性和样式

    2. 添加至页面 

      1)作为子元素添加

        $obj.append(newObj);    //在$obj的末尾添加子元素newObj

        $obj.prepend(newObj);    //作为第一个子元素添加至$obj中

      2)作为兄弟元素添加

        $obj.after(newObj);        //在$obj的后面添加兄弟元素

        $obj.before(newObj);    //在$obj的前面添加兄弟元素

      3)移除元素 

        $obj.remove();    //移除$obj

    10)jQuery事件处理

    1. 文档加载完毕

       原生JS 方法:window.onload

       jQuery:

    //语法一 
    $(document).ready(function (){
      //文档加载完毕后执行
    })
    //语法二 
    $().ready(function (){
      //文档加载完毕后执行
    })
    //语法三 
    $(function(){
      //文档加载完毕后执行
    })

    区别:原生onload事件不能重复书写,会产生覆盖问题;jquery中对事件做了优化,可以重复书写ready方法,依次执行

    2. 事件绑定方式

    事件名称省略 on 前缀

      //on("事件名称",function)
      $("div").on("click",function(){});
      //bind("事件名称",function)
      $("div").bind("click",function(){});
      //事件名作为方法名
      $("div").click(function(){});  

    3. this表示事件的触发对象,在jquery中可以使用,注意转换类型。this为原生对象只能使用原生的属性和方法,可以使用$(this)转换为jquery对象,使用jquery方法。

  • 相关阅读:
    C++中使用多线程
    hdu 4223 dp 求连续子序列的和的绝对值最小值
    hdu 1372 bfs 计算起点到终点的距离
    hdu 4217 线段树 依次取第几个最小值,求其sum
    心得
    hdu 1175 bfs 按要求进行搜索,是否能到达,抵消两个(相同)棋子
    hdu 4221 greed 注意范围 工作延期,使整个工作时间罚时最少的单个罚时最长的值
    hdu 2844 多重背包 多种硬币,每一种硬币有一点数量,看他能组成多少种钱
    uva LCDDisplay
    hdu 4218 模拟 根据一个圆点和半径画一个圆 注意半径要求
  • 原文地址:https://www.cnblogs.com/maplethefox/p/11223246.html
Copyright © 2011-2022 走看看