jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

hyp1204

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量167

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/huoyunp/article/details/78683705

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript的复习

css.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>even.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript">
        function myClick(){
            var e=event.srcElement;
            var bd=e.parentNode;
            bd.removeChild(e);
        }

        window.onload=function(){
        //获取所有的p
            var pArray=document.getElementsByTagName("p");
            for(var i=0;i<pArray.length;i++){
                if(pArray[i].addEventListener){
                    alert('chrome');
                    //除了<=ie8以外的浏览器外使用addEventListener添加事件
                    pArray[i].addEventListener("click",myClick);
                }else{
                    alert('ie');
                    //ie浏览器的添加事件
                    pArray[i].attachEvent("onclick",myClick);
                }
            }
        }
    </script>
  </head>

  <body>
    <p>如果你点我，我就会消失</p>
    <p>继续点我</p>
    <p>接着点我</p>
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>work.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

    <script type="text/javascript"> 
        /** 
          * 全选  
           */  
           function selectAll() {  
                var all = document.getElementById("all");  
                var languages = document.getElementsByName("selected");  

                for (var i=0; i < languages.length; i++) {  
                    languages[i].checked = all.checked;  
                }         
            }  

             /**  
             * 反选  
             */  
            function inverse() {  
                var languages = document.getElementsByName("selected");  

                for (var i=0; i < languages.length; i++) {  
                    var language = languages[i];  

                    if(language.checked) {  
                        language.checked = false;  
                    }else {  
                        language.checked = true;  
                    }  
                 }
            } 
    </script>
  </head>
  <input onclick="selectAll()" type="checkbox"  id="all"/>全选<input type="checkbox" onclick="inverse()"name=""/>反选
  <input type="checkbox" name="selected"/>篮球
  <input type="checkbox" name="selected"/>足球
  <input type="checkbox" name="selected"/>排球
  </body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>work.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <!--
        js实现奇偶行变色
    -->
    <script type="text/javascript">

        window.onload =function(){
        //获取table
        var table=document.getElementById("oTable");
        //获取tr
        var trs=document.getElementsByTagName("tr");
        //根据奇偶行显示不同的颜色
        for(var i=0;i<trs.length;i++){
            if(i%2==0){
                trs[i].style.backgroundColor="#8470FF";
            }else{
                trs[i].style.backgroundColor="#FFB6C1";
            }
        }
    }
    </script>
  </head>
  <body>
      <table id="oTable" height="150" width="150" border="1" style="border-collapse:collapse;">
        <tr>
            <th>用户名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>18</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>17</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>女</td>
            <td>22</td>
        </tr>
      </table>
  </body>
</html>

jQuery是什么

John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作
参见<<什么是jQuery.JPG>>
Javascript 是一种由Netscape的LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务端语言，比如Perl，遗留的速度问题，为客户端提供更流畅的浏览效果。
JQuery 是继prototype之后又一个优秀的Javascript框架，它是轻量级的JS库。它的核心理念就是writer less, do more 。

依赖的库：jquery-3.1.0

引用的标签
  <script type="text/javascript" src="jquery-3.1.0.js"></script>

要使用jQuery

（1）写少代码,做多事情【write less do more】
（2）免费，开源且轻量级的js库，容量很小
注意：项目中，提倡引用min版的js库
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome
注意：jQuery不是将所有JS全部封装，只是有选择的封装
（4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能
（5）文档手册很全，很详细
（6）成熟的插件可供选择
（7）提倡对主要的html标签提供一个id属性，但不是必须的
（8）出错后，有一定的提示信息
（9）不用再在html里面通过

.简单介绍JQuery的优势。

开源的、免费的
轻量级的非常灵巧
拥有强大的选择器
出色的DOM操作的封装
可靠的事件处理机制
完善的AJAX
出色的浏览器兼容性
链式操作方式
隐式迭代
行为层与结构层的分离
丰富的插件支持
完善的文档说明

jQuery对象与DOM对象

jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

jQuery 对象转成 DOM 对象

语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
$("#msg")[0]       
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 
$("#msg").get(0)

DOM 对象转成 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如：
$(document.getElementById(“msg”))

转换后就可以使用 jQuery 中的方法了

jQuery对象与dom对象的转换举例
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").get(0).innerHTML;
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用jQuery的方法

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hello.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">
    //dom元素初始化完成之后才会调用
       /**  
       * JavaScript DOM对象转换成JQuery对象  
       */  
      function javaScriptToJquery()  
      {  
          //DOM对象  
          var divObject = document.getElementById("mydiv");  
          //jQuery对象  
          var $divObject = $(divObject);  

          alert("JavaScript DOM对象转换成JQuery对象："+divObject);  
      }  

      /**  
       * JQuery对象转换成JavaScript DOM对象  
       */  
      function jqueryToJavaScript()  
      {  
          //jQuery对象  
          var $divObject = $("#mydiv");  
          //DOM对象  
          var divObject = $divObject[0];  

          //DOM对象  
          var divObject1 = $divObject.get(0);  

          alert("JQuery对象转换成JavaScript DOM对象方法一："+divObject+"\n"+"JQuery对象转换成JavaScript DOM对象方法二："+divObject1);  
      }  
    </script>
  </head>
  <body>
     <div id="mydiv">HTML</div>  
     <input type="button" id="btn1" value="JavaScript DOM对象转换成JQuery对象" onclick="javaScriptToJquery()"/>  
   <input type="button" id="btn2" value="JQuery对象转换成JavaScript DOM对象" onclick="jqueryToJavaScript()"/>  
  </body>
</html>

jQuery 选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器
这里写图片描述

简洁的写法
这里写图片描述

基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标记名来查找 DOM 元素
这里写图片描述
基本选择器示例

改变 id 为 one 的元素的背景色为 红色
$("#one").css("backgroundColor","red");
改变元素名为 <p> 的所有元素的背景色为 # bbffaa，字体颜色为红色
$("p").css({color:"red",backgroundColor:"#bbffaa"});
改变第一个<p>元素的背景色为红色
$("p").eq(0).css("backgroundColor","red");
改变所有<h1>元素和 id 为 one 的元素的背景色为 # bbffaa
$("h1,#one").css("backgroundColor","#bbffaa");

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器
这里写图片描述
注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

层次选择器示例

改变 <body> 内所有 <div> 的背景色为 # bbffaa
    $(“body div")
改变 <body> 内子 <div> 的背景色为 # bbffaa
    $(“body>div")
改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa  
    $("#one+div")
改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa
    $("#two~div")
改变 id 为 two 的元素所有 <p> 兄弟元素的背景色为 # bbffaa   $("#two"). siblings("p")

基本过滤选择器

这里写图片描述

内容过滤选择器

这里写图片描述
内容过滤选择器示例

改变含有文本 ‘di’ 的 p元素的背景色为 # bbffaa
   $("p:cotains(di)")
改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa
改变含有 class 为 mini 元素的 p元素的背景色为 # bbffaa
  $("p:has(.mini)")
改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素
这里写图片描述

可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

属性过滤选择器

这里写图片描述

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

子元素过滤选择器

这里写图片描述

nth-child() 选择器详解如下：
(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素
(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素
(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素
(3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

表单对象属性过滤选择器

此选择器主要对所选择的表单元素进行过滤
这里写图片描述

表单对象属性过滤选择器示例
利用 jQuery 对象的 val() 方法改变表单内可用元素的值
利用 jQuery 对象的 val() 方法改变表单内不可用元素的值
利用 jQuery 对象的 length 属性获取多选框选中的个数
利用 jQuery 对象的 text() 方法获取下拉框选中的内容

表单选择器

这里写图片描述
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
append()：追加到父元素之后
prepend()：追加到父元素之前
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
remove()：删除自已及其后代节点
val()：获取value属性的值
val(“”)：设置value属性值为”“空串，相当于清空
text()：获取HTML或XML标签之间的值
text(“”)：设置HTML或XML标签之间的值为”“空串
clone()：只复制样式，不复制行为
clone(true)：既复制样式，又复制行为
replaceWith()：替代原来的节点
removeAttr()：删除已存在的属性
addClass()：增加已存在的样式
removeClass()：删除已存在的样式

AJAX请求

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ajax.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">

    //dom元素初始化完成之后才会调用
    $(function(){

        $("input[type='button']").click(function(){
            var addCode=$("#addCode").val();
            var url="http://restapi.amap.com/v3/weather/weatherInfo?key=27fdf559d3eea6261a682298a8994a2a&city="+addCode;
            //$.ajax是对象的一个静态方法
            $.ajax({
               //请求method类型
               type: "GET",
               //请求的路径
               url: url,
               //自动转成json对象 返回字符串转成json对象
               dataType:'json',
               //传送数据
               data: "name=John&location=Boston",
               //请求响应的回调函数  参数1就是写回的json数据
               success: function(msg){
                    var tq=msg.lives[0].weather;
                    $("div").remove();
                    if(tq=="晴"){
                        $(document.body).append("<div><img src='qt.png'/></div>")
                    }else{
                        $(document.body).append("<div><img src='dy.png'/></div>")
                    }
               }
            });
        });
    });

    //dom元素初始化完成之后才会调用
    $(function(){

        $("input[type='button']").click(function(){
            var addCode=$("#addCode").val();
            var url="http://restapi.amap.com/v3/weather/weatherInfo";
            $.post(url,"key=27fdf559d3eea6261a682298a8994a2a&city="+addCode,function(msg){
                    var tq=msg.lives[0].weather;
                    $("div").remove();
                    if(tq=="晴"){
                        $(document.body).append("<div><img src='qt.png'/></div>")
                    }else{
                        $(document.body).append("<div><img src='dy.png'/></div>")
                    }
            });
        });
    });
    </script>
  </head>

  <body>
    <input id="addCode" type="text" value=""/><input type="button" value="获取天气"/>
  </body>
</html>

通过公网ip过去所在位置
例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hello.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">

    //dom元素初始化完成之后才会调用
    $(function(){

        $("input[type='button']").click(function(){
            var pro=$("#pro").val();
            var url="http://restapi.amap.com/v3/ip?key=09a1956b684aaa6cf57f63d5b82b3192&ip="+pro;
            //$.ajax是对象的一个静态方法
            $.ajax({
               //请求method类型
               type: "GET",
               //请求的路径
               url: url,
               //自动转成json对象 返回字符串转成json对象
               dataType:'json',

               success: function(msg){
                    var ip=msg.province;
                    var city=msg.city; 
                    $("div").remove();
                    $(document.body).append("<div>你所获取的公网地址"+ip,city+"</div>");

               }
            });
        });
    });
    </script>
  </head>

  <body>
    <input id="pro" type="text" value=""/><input type="button" value="获取公网ip"/>
  </body>
</html>

jquery的插件机制（方法的拓展）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hello.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">

    //dom元素初始化完成之后才会调用
    $(function(){
    //jquery中的静态方法的拓展
        $.extend({
            add:function(p1,p2){
                return p1+p2;
            },
            //会覆盖jquery中的ajax方法
            /*ajax:function(){
                alert('ttt');
            }*/
        });

        alert($.add(10,20));
        //$.ajax();
        //实例方法的拓展$.fn.extend
        $("input[type='uname']").val();//拓展一个方法
        $.fn.extend({
            value:function(){
            //this是jquery对象
                return this.val(); 
            }
        });
    });
</script>
  </head>

  <body>
    <form action="">
      用户名：<input type="text" name="uname" value="123"/>
     密码：<input type="text" name="password"/>
      年龄：<input type="text" name="age"/>
      爱好：
      <input type="checkbox" name="hooby" value="check1"/> 看书
      <input type="checkbox" name="hooby" value="check2" checked="checked"/> 旅游
      <input id="btn" type="button" value="保存"/>
    </form>
  </body>
</html>

serialize() 例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>hello.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">

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <script type="text/javascript" src="jquery-3.1.0.js"></script>

    <script type="text/javascript">

    //dom元素初始化完成之后才会调用
        $(function(){
            /*var uname=$("#uname").val();
            var password=$("#password").val();
            var age=$("#age").val();
            var hooby=$("input[type='hooby']").val();*/

            //节省了上面的代码，代替以上代码
            $("#btn").click(function(){
                var paramStr= $("form").serialize(); 
                alert(paramStr);
            }); 
    });
    </script>

     <!--循环-->
    <script type="text/javascript">
    //dom元素初始化完成之后才会调用
        $(function(){
        var arr=["张三","李四"];
        // index是循环的下标 value每次循环的值
        $.each(arr,function(index,value){
            console.log(index+"--"+value);
        });

        $("input[type='checkbox']").each(function(index,value){
            //默认被选中jquery对象
            $(value).attr("checked","checked");
        });
    });
    </script>

  </head>
  <body>
    <form action="">
      用户名：<input type="text" name="uname"/>
     密码：<input type="text" name="password"/>
      年龄：<input type="text" name="age"/>
      爱好：
      <input type="checkbox" name="hooby" value="check1"/> 看书
      <input type="checkbox" name="hooby" value="check2" checked="checked"/> 旅游
      <input id="btn" type="button" value="保存"/>
    </form>
  </body>
</html>