JQuery学习笔记

Posted 爱拼才会赢

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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>

 

 

以上是关于JQuery学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

web前端开发JQuery常用实例代码片段(50个)

[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

jQuery源代码学习笔记:jQuery.fn.init(selector,context,rootjQuery)代码具体解释

JQuery学习笔记

JQuery的学习笔记

jQuery学习笔记