jquery学习笔记

最新推荐文章于 2024-07-23 21:42:00 发布

mingshengda

最新推荐文章于 2024-07-23 21:42:00 发布

阅读量455

点赞数 1

分类专栏： mingsheng的学习笔记文章标签：学习 jquery 前端

本文链接：https://blog.csdn.net/mingshengda/article/details/123223541

版权

mingsheng的学习笔记专栏收录该内容

33 篇文章 0 订阅

订阅专栏

一、介绍
jQuery是JS的库，库：相当于java的工具类。jQuery是存放JS代码的，放的是用JS代码写的函数。是为了简化JavaScript对HTML Dom的操作。
JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery 能够使用户的 html 页面保持代码和 html 内容分离，也就是说，不用再在 html 里面插入一堆 js 来调用命令了，只需要定义 id 即可。
jQuery 是一个兼容多浏览器的 javascript 库，核心理念是 write less,do more(写得更少,做得更多)。
二、第一个例子

<html>
    <head>


    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
            if($!= undefined ){ 
                alert("success")
                console.log("yes")
            } 
            //$是jQuery中的函数名称，document是函数的参数，作用是把domcument对象变成jQuery函数库可以使用的对象
            //ready是jQuery中的函数，当页面的document对象加载成功后会执行ready函数的内容，相当于onload事件
            //function是自定义函数，来表示onload后执行的代码。
          $(document).ready(function () {
              alert("hello Kero")
            })


        </script>
    </body>
</html>

//简化方式，等价
$(function(){
alert(“hello Kero2”)
})
dom对象和jQuery对象：
dom对象：使用JS语法创建的对象叫做dom对象，也就是JS对象。
var obj = document.getElementById(“xx”),obj就是dom对象。
jQuery对象：使用jQuery语法表示对象叫做jQuery对象，注意，jQuery表示的对象都是数组。
如：var jobj = $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲xxx") jobj 就是jQ\dots$ (dom对象)
jQuery转化为dom：语法：从数组中获取第一个对象，第一个对象就是dom对象，使用【0】或get(0).
进行转换是为了要使用对象的方法或者属性。当你是dom对象，你可以使用dom对象的方法、属性，你想用jQuery提供的函数，必须是jQuery对象才行。
例子：

<html>
    <head>


    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
          //dom转为jQuery
           function btnclick(){
               //获取dom对象
               var obj = document.getElementById("btn")
                alert("使用dom对象属性="+obj.value)
                //把dom转为jQuery，目的是使用jQuery中的函数
                var $jobj=$(obj);
                //调用jQuery中的函数，获取值
                alert("使用jQuery对象属性="+$jobj.val())
           }
        </script>
        <input type="button" value="小可1"  id="btn" onclick="btnclick()">
    </body>
</html>
<html>
    <head>


    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
        function btnclick(){
         //使用jQuery的语法获取页面中dom对象
         //var obj = $("#txt")[0];//从数组中获取下标是0的dom对象
         var obj = $("#txt").get(0);//从数组中获取下标是0的dom对象
        // alert(obj.value)
        var num = obj.value;
        obj.value = num*num;
        }
        </script>
        <div>
            <input type="button" value="计算平方"  id="btn" onclick="btnclick()"><br>
            <input type="text" id="txt" value="整数">
        </div>
        
    </body>
</html>

三、基本选择器使用
选择器：是字符串，用来定位当面页面的dom对象，是jQuery的核心。定位了dom对象，就可以通过jQuery操作dom对象。
常用的选择器：1、id选择器，语法： $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲dom对象的id值") 通过d\dots$ (".class样式名")，class表示css中的样式，使用样式的名称定位dom对象的
3、标签选择器，语法： $(" 标签名称 ") ，使用标签名称定位 d o m 对象的。 4 、所有选择器，语法：$ ("*"),选取页面中所有dom对象
5、组合选择器：语法：$("#id,class,标签名")

<html>
    <head>
   <style type="text/css">
       div{
           background: gray;
           width: 200px;
           height: 100px;
       }


   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
       function fun1(){
           //id选择器
           var obj=$("#one");
           //使用jQuery中改变样式的函数
           obj.css("background","red");
       }
       function fun2(){
           //class选择器
           var obj=$(".two");
           //使用jQuery中改变样式的函数
           obj.css("background","yellow");
       }
       function fun3(){
           //标签选择器
           var obj=$("div");//数组有三个对象
           //使用jQuery中改变样式的函数
           //jquery操作都是操作数组中的全部成员。所以是给所有div都设置了背景色
           obj.css("background","blue");
       }
       function fun4(){
           //全部选择器
           var obj=$("*");//数组有三个对象
           //使用jQuery中改变样式的函数
           obj.css("background","green");
       }
       function fun5(){
           //组合选择器
           var obj=$("#one,span");//数组有三个对象
           //使用jQuery中改变样式的函数
           obj.css("background","black");
       }
        </script>
        <div id="one">我是第一个div </div><br>
        <div class="two">我是class的div</div><br>
        <div>没有class和id的div</div><br>
        <span>我是span标签</span><br>
        <input type="button" value="获取id是one1的dom对象" onclick="fun1()">
        <input type="button" value="使用class样式获取dom对象" onclick="fun2()">
        <input type="button" value="使用标签获取dom对象" onclick="fun3()">
        <input type="button" value="使用全部选择器获取dom对象" onclick="fun4()">
        <input type="button" value="使用组合选择器获取dom对象" onclick="fun5()">
    </body>
</html>

6、表单选择器，语法： $(" : t y p e 属性值 ") ，使用 < i n p u t > 标签的 t y p e 属性值，定位 d o m 对象的方法。例如：$ (":text")选取所有单行文本框
$(":password")选取所有的密码框
$(":radio")选取所有的单选框
$(":checkbox")选取所有的多选框
tr不行，tr不是input标签。

<html>
    <head>
   <style type="text/css">
    
   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
       function fun1(){
           //表单选择器
           var obj=$(":text");
           //获取value
           alert(obj.val());
       }
       function fun2(){
           //表单选择器
           var obj=$(":radio");//有两个对象。
           //获取value
           //循环数组，可以用dom的属性或函数
           for(var i=0 ; i<obj.length;i++){
            var dom= obj[i];
            alert(dom.value)
           }


       }
       function fun3(){
           //表单选择器
           var obj=$(":checkbox");
           for(var i=0;i<obj.length;i++){
               var dom =obj[i];
               alert(dom.value);
           }
       }
        </script>
       <input  type="text" value="我是type= text"><br>
       <input type="radio" value="man">男<br>
       <input type="radio" value="woman">女<br>
       <input type="checkbox" value="bike">骑行<br>
       <input type="checkbox" value="bike2">骑行2<br>
       <input type="checkbox" value="bike3">骑行3<br>


        <input type="button" value="读取text的值" onclick="fun1()">
        <input type="button" value="读取radio的值" onclick="fun2()">
        <input type="button" value="读取checkbox的值" onclick="fun3()">
    </body>
</html>

四、过滤器
在定位了dom对象后，根据一些条件筛选dom对象，过滤器也是一个字符串，不能单独使用，要和选择器一起使用。
1、选择第一个first，保留数组中第一个dom对象
语法： $(" 选择器： f i r s t ") 2 、选择最后一个 l a s t ，保留数组中最后 d o m 对象语法：$ (“选择器：last”)
3、选择数组中指定对象
语法： $(" 选择器： e q (数组索引) ") 4 、选择数组中小于指定索引的所有 d o m 对象语法：$ (“选择器：lt(数组索引)”)
5、选择数组中大于指定索引的所有dom对象
语法：$(“选择器：gt(数组索引)”)

<html>
    <head>
   <style type="text/css">
    div{
        background: gray;


    }
   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
      //$(document).ready：当页面中的dom对象加载成功后会执行ready（），相当于onload事件
      $(function () {
          //当页面dom对象加载后，给对象绑定事件，因为此时button对象已经在内存中创建好了，才能使用。

       $("#btn1").click(function(){
              //过滤器
              var obj=$("div:first");
              obj.css("background","red");
              
          })
          //绑定事件
          $("#btn2").click(function(){
              //过滤器
              var obj=$("div:last");
              obj.css("background","green");
              
          })
          $("#btn3").click(function(){
              //过滤器
              var obj=$("div:eq(3)");
              obj.css("background","blue");
              
          })
          $("#btn4").click(function(){
              //过滤器
              var obj=$("div:lt(3)");
              obj.css("background","orange");
              
          })
          $("#btn5").click(function(){
              //过滤器
              var obj=$("div:gt(3)");
              obj.css("background","gold");
              
          })
      })
        </script>
       <div id="one" >我是div1</div>
       <div id="two" >我是div2</div>
       <div >我是div3
        <div  >我是div4</div>
        <div  >我是div5</div>
       </div>
       <div>我是div6</div>
       <br>
       <span>我是span</span>
       <input type="button" value="获取第一个div" id="btn1" >
       <input type="button" value="获取最后一个div" id="btn2" >
       <input type="button" value="获取下标等于3的div" id="btn3" >
       <input type="button" value="获取下标小于3的div" id="btn4" >
       <input type="button" value="获取下标大于3的div" id="btn5" >


    </body>
</html>

表单属性过滤器：根据表单中dom对象的状态情况，定位dom对象。
1、选择可用的文本框： $(" ： t e x t : e n a b l e d ") 2 、选择不可用的文本框：$ (":text:disabled")
3、复选框选中的元素：$(":checkbox:checked")
4、选择指定下拉列表的被选中元素：选择器>option：selected

五、事件
jQuery给dom对象绑定事件：
1、$(选择器).事件名称（事件处理函数）
$(选择器)：定位dom对象，可以有多个，这些dom对象都绑定事件了。
事件名称：就是js中事件去掉on的部分，例如：js中的单击事件是onclick（），jQuery中的事件名称就是click。
事件的处理函数：就是一个function，当事件发生时，会执行这个函数的内容。
例如给id是btn的按钮绑定单击事件。
$("#btn").click(function(){
alert(“btn按钮被单击了”)
})

2、on绑定事件:
$(选择器）.on(事件名称，事件处理函数)
事件名称：就是js事件中去掉on的部分。

$("#btn").on(“click”,function(){
处理函数语句。
})

六、函数
1、val:操作数组中dom对象的value属性。
$(选择器).val():无参数调用形式，读取数组中第一个dom对象的value属性值。
$(选择器).val(值)：有参形式调用，对数组中所有dom对象的value属性值进行统一赋值。
2、text:操作数组中所有dom对象的文字显示内容属性
$(选择器).text（）无参数调用，读取数组中所有dom对象的文字显示内容，将得到内容拼接为一个字符串返回。
$(选择器).text(值)：有参数调用，对数组中所有dom对象的文字显示内容进行统一赋值。
3、attr：对val,text之外的其他属性操作
$(选择器).attr(“属性名”)：获取dom数组第一个对象的属性值
$(选择器).attr(“属性名”，”值“)：对数组中所有dom对象的属性设为新值

<html>
    <head>
   <style type="text/css">
   div{
       background: blue;
   }
   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
        //在dom对象创建好后绑定事件
        $(function(){
            $("#btn1").click(function(){
                //val获取dom数组中第一个对象的value属性值
                 var text=$(":text").val();
                 alert(text)
            })


            $("#btn2").click(function(){
                //设置所有的text的value为新值
                 var text=$(":text").val("Kero");
            })


            $("#btn3").click(function(){
                //获取div
                 var text=$("div").text();
                 alert(text)
            })


            $("#btn4").click(function(){
                
                 var text=$("div").text("小可最可爱");
                 
            })


            $("#btn5").click(function(){
               
                 var text=$("img").attr("src");
                 alert(text)
            })


            $("#btn6").click(function(){
                
                 var text=$("img").attr("src","2.jpg");
                 alert(text)
            })




        })
        
           
        </script>




        <input type="text" value="小可" ><br>
        <input type="text" value="阿梓" ><br>
        <input type="text" value="七海" ><br>
        <div>我是第一个div</div>
        <div>我是第二个div</div>
        <div>我是第三个div</div><br>
        <img src="1.jpg" id="xiaoke"><br>


       <input type="button" value="获取第一个文本框的值" id="btn1">
       <input type="button" value="给所有文本框赋新值" id="btn2">
       <input type="button" value="获取div的所有文本" id="btn3">
       <input type="button" value="设置div文本值" id="btn4">
       <input type="button" value="读取src属性的值" id="btn5">
       <input type="button" value="设置指定属性值" id="btn6">


    </body>
</html>

1、remove():
$(选择器).remove():将数组中所有dom对象及其子对象一并删除
2、empty（）：
$(选择器).empty():将数组中所有dom对象的子对象删除
3、append():
$(选择器).append(“

动态添加的div

”),为数组中所有dom对象添加子对象。
4、html()：
设置或返回被选元素的内容（innerHTML）
$(选择器).html()：无参数调用方法，获取dom数组第一个元素的内容
$(选择器).html(值)：有参数调用方法，用于设置dom对象中所有元素的内容

<html>
    <head>
   <style type="text/css">
   div{
       background: blue;
   }
   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
        //在dom对象创建好后绑定事件
        $(function(){
            $("#btn1").click(function(){
                //使用remove删除父和子所有的dom对象
                 $("select").remove();
            })


            $("#btn2").click(function(){
                //使用remove删除父和子所有的dom对象
                 $("select").empty();
            })


            $("#btn3").click(function(){
                //使用append增加dom对象
                 $("#father").append("<input type = 'button' value ='增加的按钮'>");
            })


            $("#btn4").click(function(){
                //使用html函数获取数组中第一个dom对象的文本值
                 alert($("span").html());
            })


            $("#btn5").click(function(){
                
                $("span").html("我是新的<b>可可音</b>");
            })
            })
        
        </script>


             <select>
                 <option value="小可">小可</option>
                 <option value="阿梓">阿梓</option>
                 <option value="七海">七海</option>
             </select>
<br>
             <select>
                <option value="小可1">小可1</option>
                <option value="阿梓1">阿梓1</option>
                <option value="七海1">七海1</option>
             </select>
             <br>
             <div id="father">我是一个div</div><br>


             <span>我是大大<b>可</b></span>
             <br>
             <span>我是小小<b>可</b></span><br>




       <input type="button" value="使用remove删除所有对象" id="btn1">
       <input type="button" value="使用empty删除子对象" id="btn2">
       <input type="button" value="增加一个子dom对象" id="btn3">
       <input type="button" value="获取第一个dom的文本值" id="btn4">
       <input type="button" value="设置span的所有dom的值" id="btn5">
       


    </body>
</html>

5、each（）：
each是对数组，json和dom数组等的遍历，对每个元素调用一次函数。
语法1：$.each(要遍历的对象，function（index，element) {处理程序}
语法2：jQuery对象.each(function(index,element) {处理程序}
index:数组的下标。element：数组的对象

<html>
    <head>
   <style type="text/css">
   div{
       background: blue;
   }
   </style>
    </head>
    <body>
        <script src="jquery -3.6.0.js"></script>
        <script type="text/javascript">
        //在dom对象创建好后绑定事件
        $(function(){
            $("#btn1").click(function(){
                //使用remove删除父和子所有的dom对象
                 $("select").remove();
            })


            $("#btn2").click(function(){
                //使用remove删除父和子所有的dom对象
                 $("select").empty();
            })


            $("#btn3").click(function(){
                //使用append增加dom对象
                 $("#father").append("<input type = 'button' value ='增加的按钮'>");
            })


            $("#btn4").click(function(){
                //使用html函数获取数组中第一个dom对象的文本值
                 alert($("span").html());
            })


            $("#btn5").click(function(){
                
                $("span").html("我是新的<b>可可音</b>");
            })
            $("#btn6").click(function(){
                //循环非dom数组
                var arr=[1,2,3];
                $.each(arr,function(index,element){
                    alert("love")
                })
            })
                $("#btn7").click(function(){
                //循环json数组
                var json ={"name":"小可","age":16};
                $.each(json,function(i,n){
                 alert("i是key="+i+",n是值="+n);
                })
                })
                $("#btn8").click(function(){
                //循环dom数组
                var  domArray =$(":text");//dom数组
                $.each(domArray,function(i,n){
                    alert("i="+i+",n="+n.value);
                })
                })
                $("#btn9").click(function(){
                 $(":text").each(function(i,n){
                    alert("i="+i+",n="+n.value);
                 })
                })


            })
            
        
        </script>
            <input type="text" value="大可">
            <input type="text" value="大可1">
            <input type="text" value="大可2">
            <br>
             <select>
                 <option value="小可">小可</option>
                 <option value="阿梓">阿梓</option>
                 <option value="七海">七海</option>
             </select>
<br>
             <select>
                <option value="小可1">小可1</option>
                <option value="阿梓1">阿梓1</option>
                <option value="七海1">七海1</option>
             </select>
             <br>
             <div id="father">我是一个div</div><br>


             <span>我是大大<b>可</b></span>
             <br>
             <span>我是小小<b>可</b></span><br>




       <input type="button" value="使用remove删除所有对象" id="btn1">
       <input type="button" value="使用empty删除子对象" id="btn2">
       <input type="button" value="增加一个子dom对象" id="btn3">
       <input type="button" value="获取第一个dom的文本值" id="btn4">
       <input type="button" value="设置span的所有dom的值" id="btn5">
       <input type="button" value="循环普通数组" id="btn6">
       <input type="button" value="循环json数组" id="btn7">
       <input type="button" value="循环dom数组" id="btn8">
       <input type="button" value="循环jquery对象" id="btn9">
       


    </body>
</html>

七、Ajax
使用jQuery中的函数实现ajax请求的处理。
没有jQuery之前是用XMLHttpRequest做ajax，有四个步骤，jQuery简化了Ajax请求的处理。使用三个函数可用实现ajax请求的处理。
1、 $. a j a x () : 是 j Q u e r y 中实现 a j a x 的核心函数。 2 、$ .post():使用post方式做ajax请求
3、$.get()：使用get方式发送ajax请求
$. p o s t () 和$ .get()在内部都是调用的$.ajax();
$.ajax()的使用：
函数的参数表示请求的url，请求的方式，参数值等信息。
$. a j a x () 参数是一个 j s o n 结构。例如：$ .ajax({名称1：值1，名称2：值2，…})

$.ajax({async:true , 
contextType:"application/json"，
 data:{"name":"xiaoke","age":16 }
 dataType:"json"，
error：function（）{
请求出现错误时执行的函数
}。
success：function（data）{
//data是responseText，是jQuery处理后的一个数据
}，
url:“xxx”,
type:"get"
  } )

json结构的参数说明：
1、async：是布尔类型，默认是true，表示异步请求。可以不写这个配置项
false表示同步请求。
2、contextType：一个字符串，表示从浏览器发送服务器的参数的类型，可以不写。
例如你想表示请求的参数是json格式的，可以写application/json
3、data：可以是字符串，可以是数组，可以是json，表示请求的参数和参数值。常用的是json格式的数据
4、dataType：是用来表示希望从服务器端返回的数据格式。可选的有xml，html，text，json
当我们使用$.ajax()发送请求时，会把dataType的值发送给服务器，那我们的servlet能够读取到dataType的值，就知道你的浏览器需要的是json或者xml数据，那么服务器就可以返回你需要的数据格式。
5、error：一个function，用来表示当请求发生错误时所执行的函数。
error：function（）{发生错误时执行}
6、success：是一个function，请求成功了，从服务器端返回了数据，会执行success指定的函数。之前使用XMLHttpRequest对象，当readyState==4&&status ==200的时候
7、url:请求的地址
8、type:请求的方式，get或者是post。
url,data,dataType,success重点。

mingshengda

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery学习笔记

一、介绍jQuery是JS的库，库：相当于java的工具类。jQuery是存放JS代码的，放的是用JS代码写的函数。是为了简化JavaScript对HTML Dom的操作。JQuery 是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的 js 库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再支持 IE6/7/8 浏览器。jQuery 使用户能更方便地处理 H
复制链接

扫一扫