JQuery学习笔记

2021-07-12 02:07

阅读：490

标签：document 表格作用网站 table function 演示转换内容

　　一 . 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.htmltitle>
    
    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.htmltitle>
    
    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">
            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.htmltitle>
    
    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="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 worlddiv>
  body>
html>

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

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
  head>
    title>init.htmltitle>
    
    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">
            $(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 worlddiv>
  body>
html>

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

　　3.4 Css中的选则器：

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
  head>
    title>css.htmltitle>
    
    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">
    
    
    style type="text/css">
        #mydiv{color:red}
        .mycalss{color:green}
    style>    
  head>
  
  body>
        div id="mydiv">hello worlddiv>
        div id="mydiv1" class="mycalss">hello worlddiv>
  body>
html>

　　3.5jQuery中的选则器：

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

　　　　　　具体的测试代码如下：

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
html>
  head>
    title>css.htmltitle>
    
    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">
        $(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 worlddiv>
        div id="mydiv1" class="myclass">hello worlddiv>
        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>nifdsagth>
                th>nifdsagth>
                th>nifdsagth>
            tr>
            
            tr>
                td>nifdsagtd>
                td>nifdsagtd>
                td>nifdsagtd>
            tr>
            
            tr>
                td>nifdsagtd>
                td>nifdsagtd>
                td>nifdsagtd>
            tr>
            tr>
                td>nifdsagtd>
                td>nifdsagtd>
                td>nifdsagtd>
            tr>
            tr>
                td>nifdsagtd>
                td>nifdsagtd>
                td>nifdsagtd>
            tr>
            tr>
                td>nifdsagtd>
                td>nifdsagtd>
                td>nifdsagtd>
            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.htmltitle>
    
    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 jquerydiv>
    input type="text" id="uname" value="jiaozi"/>
  body>
html>

JQuery学习笔记

标签：document 表格作用网站 table function 演示转换内容

原文地址：http://www.cnblogs.com/xushirong/p/7082856.html

上一篇：jquery模拟可输入的下拉框

下一篇：解决resin下jsp中文一直乱码

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JQuery学习笔记
文章链接：http://soscw.com/essay/103959.html

亲，登录后才可以留言！

JQuery学习笔记

评论

热门文章

推荐文章

最新文章

置顶文章