• JQuery学习笔记


      一  . JQuery教程

      1. jQuery是一个JavaScript库
      2. jQuery极大的简化了JavaScript编程
      3. jQuery很容易学习  

        1.jQuery 库 - 特性
          jQuery 是一个 JavaScript 函数库。
          jQuery 库包含以下特性:
            HTML 元素选取
            HTML 元素操作
            CSS 操作
            HTML 事件函数
            JavaScript 特效和动画
            HTML DOM 遍历和修改
            AJAX
            Utilities

        2.向自定义页面中添加jQuery库

          知识补充:alert();表示会在界面弹出一个框 ,

                定义一个function函数: function hello(){ this is my first function };

                CDN:表示内容分发网络,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

          jQuery库位于一个JavaScript文件中,其中包含了所有的jQuery函数。可以通过下面的标记把jQuery添加到网页中:

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
      <head>
        <title>hellojQuery.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        </script>
        //此处添加的为本地下载好的jQuery,如没有下载,可以使用CDN,定义网站,从网站中获取
    <script type="text/javascript" src="jquery-2.2.4.js"></script> <script type="text/javascript"> alert($); </script> </head> <body> This is my HTML page. <br> </body> </html>

        3.js中dom元素的初始化和过程

          3.1js 与html中加载的过程是从上往下依次执行的。

            演示代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>init.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <!-- 此处是不能直接获取名称为mydiv的元素内容的,因为代码是从上往下执行的 -->
            <script type="text/javascript">
                var mydiv=document.getElementById("mydiv");
                alert(mydiv);
            </script>    
      </head>
      
      <body>
        <div id="mydiv">
            hello world;
        </div>
      </body>
    </html>

          3.2如上述所示,要想获取上述div中的元素,可以使用事件,让该元素加载完成之后再获取,需要如下操作:

      

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>init.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <!--第一种: 此处要是想加载dom中的元素,需要事件完成,如下事件表示先加载div中的元素,然后在获取 -->
            <script type="text/javascript" src="hello.js"></script>
            <script type="text/javascript">
                window.onload=function(){
                    var mydiv=document.getElementById("mydiv");
                    alert(mydiv);
                }
                
                function loadCallBack(){
                    var mydiv=document.getElementById("mydiv");
                    alert(mydiv);
                }
            </script>    
      </head>
      
      <body onload="loadCallBack()">
        <div id="mydiv">hello world</div>
      </body>
    </html>

        3.3使用JQuery语法,去读取元素

      

    
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>init.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
            <!--第一种: 此处要是想加载dom中的元素,需要事件完成,如下事件表示先加载div中的元素,然后在获取 -->
            <script type="text/javascript" src="../jquery-2.2.4.js"></script>
            <!-- 此处使用jQuery获取div中的元素 -->
            <script type="text/javascript">
                $(function(){
                    var mydiv=document.getElementById("mydiv");
                    alert(mydiv);
                })
                
                $(document).ready(function(){
                    var mydiv=document.getElementById("mydiv");
                    alert(mydiv);
              })
            </script>    
      </head>
      
      <body>
        <div id="mydiv">hello world</div>
      </body>
    </html>

        拓展:此处要是jquery的文件不在同一级目录在上一级目录下,可以使用../ 表示上一级目录

      3.4 Css中的选则器:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!-- 以下使用css样式中的id选则器,为div中的元素设置颜色 -->
        <!-- 以下第二个使用css样式中的类选则器,为div中的元素设置颜色 -->
        <style type="text/css">
            #mydiv{color:red}
            .mycalss{color:green}
        </style>    
      </head>
      
      <body>
            <div id="mydiv">hello world</div>
            <div id="mydiv1" class="mycalss">hello world</div>
      </body>
    </html>

      3.5jQuery中的选则器:

          jquery的选则器沿用了css3的选则器语法, 并增强了功能,作用是为了获取满足选择器的dom元素集合,(返回值就是数组)

          具体的测试代码如下:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>css.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!-- 
               jquery的选择器 沿用css3的选择器语法 并增强 
            作用 是为了获取满足选择器条件的dom元素集合(返回值就是数组)
            通过jquery选择器获取到的数组 并不是一个js的数组  是jquery拓展后的数组  该数组中集成jquery的所有方法 css html cache
         -->
        <script type="text/javascript" src="../jquery-2.2.4.js"></script>    
        <script type="text/javascript">
            $(function() {
                //此处使用标准选则器
                var spanArray = $("span");
                alert(spanArray.length);
                
                //此处使用类选则器进行匹配
                var spanArray=$("*.myclass");
                alert(spanArray.length);
                
                //从处使用id选则器进行匹配
                var spanArray=$("#mydiv");
                alert(spanArray.length);
                
                //属性选则器,为下表中的基数行变为灰色 偶数行变为蓝色,第二行变为黄色
                $("tr:odd").css("backgroundColor","gray");
                $("tr:even").css("backgroundColor","green");
                $("tr:first").css("backgroundColor","yellow");
                
                //属性选则器进行匹配
                $("[href='my']").text("跳转到csdn");
                
                //&组合选则器,下述选则器要根据标签和属性进行匹配
                $("a[href='my']").text("跳转到sdfgdagagr");
                
                //||组合选则器,隔离,下述选则器会进行添加判断匹配,只要一个条件匹配则进行匹配
                $("a,[href='my']").text("跳转到sdsafasfafafawefgagr");
            })
        </script>
      </head>
      
      <body>
            <div id="mydiv">hello world</div>
            <div id="mydiv1" class="myclass">hello world</div>
            <span>
                this is hello world;
            </span>
            <span class="myclass">
                this is hello world;
            </span>
            <!-- 以下标签进行属性选则器,组合选则器,组合隔离选则器的演示 -->
            <a href="my">跳转到你好</a>
            <!-- 以下表格演示属性选则器,其中包括奇偶行的表色,第一行的表色等 -->
            <table border="1" width="500" height="80">
                <tr>
                    <th>nifdsag</th>
                    <th>nifdsag</th>
                    <th>nifdsag</th>
                </tr>
                
                <tr>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                </tr>
                
                <tr>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                </tr>
                <tr>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                </tr>
                <tr>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                </tr>
                <tr>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                    <td>nifdsag</td>
                </tr>
            </table>
      </body>
    </html>

        注:使用选则器的语法  $( function() {   定义选则器语法    })

       3.6 jQuery对象和js对象之间的区别

          初学jQuery,会对jquery对象和DOM对象心存很大的疑惑,因此有必要明白他们之间的区别和联系。DOM对象是我们用传统的方法(JavaScript)获得的对象,jQuery对象就是用jQuery的类库选择器获得的对象。JQuery对象就是通过jQuery包装DOM对象后产生的对象。JQuery对象是jQuery独有的,其可以使用jQuery里的方法,但是不能使用DOM的方法;

    var mydiv=document.getElementById("mydiv");
                    alert(mydiv)
      如下是dom对象,jquery对象,dom转jquery jquery转dom的具体代码解析:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>obj.html</title>
        
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="../jquery-2.2.4.js"></script>
        <script type="text/javascript">
              /**
                  jquery对象和dom对象的区别
                  dom对象document.getElementById dom对象只能访问dom中预定义的
                  方法 value innerHTML innerText style.样式名=样式值
                  
                  jquery对象就是通过$()对象处理返回的对象,该对象是数组,只能调用jquery提供的方法,比如 css text html val(相当于value)
              **/
            $(function (){
                //dom对象
                var myvar = document.getElementById("mydiv");
                //将获取到的对象的内容变为红色
                mydiv.style.color="red";
                
                var myvar1= document.getElementById("uname");
                //获取id 为uname的值,将值赋给myvar对象
                //myvar.innerText=myvar1.value;
                
                //jquery对象不能调用dom对象的方法
                //通过jquery对象的id选则器,将字体的颜色设置为绿色
                $("#mydiv").css("color","green");
                //获取到jquery对象中id名为uname的属性,将该属性的值赋给id名为mydiv的属性值
                $("#mydiv").text($("#uname").val());
                
                //jquery对象和dom对象的相互转换
                //1jquery对象转换为dom对象
                var divdom=$("#mydiv")[0];    //此处的[0] 也可以是get(0);
                alert(divdom.innerText);
                
                //2dom对象转换成jquery对象
                var mydiv=document.getElementById("mydiv");
                var jquerydiv=$("#mydiv");
                
            })
        </script>
      </head>
      
      <body>
       <div id="mydiv">hello jquery</div>
        <input type="text" id="uname" value="jiaozi"/>
      </body>
    </html>
     
  • 相关阅读:
    L2-1 功夫传人 (25分)
    7-11 家庭房产(25 分)
    7-11 玩转二叉树 (25分)
    7-10 排座位 (25分)
    7-12 最长对称子串 (25分)
    7-10 树的遍历 (25分)
    STL
    Max Gcd
    水果
    Rails
  • 原文地址:https://www.cnblogs.com/xushirong/p/7082856.html
Copyright © 2020-2023  润新知