JQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

落落落Luo

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量182

点赞数

分类专栏： web 文章标签： jquery

本文链接：https://blog.youkuaiyun.com/qq_41870790/article/details/104534331

版权

web 专栏收录该内容

9 篇文章

订阅专栏

JQuery

概念：

一个JavaScript框架。简化JS开发
JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已

快速入门：

一、步骤：
1.下载JQuery
2. 导入JQuery的js文件
3. 使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入-->
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
        //使用JQuery来获取元素对象
        var div1 = $("#div1");
        alert(div1.html());

        var div2 = $("#div2");

        alert(div2.html());

    </script>

</body>
</html>

JQuery对象和JS对象的区别和转换：

1.jq对象在操作时，更加方便
            2.jq对象和js对象方法不通用
            3.两者相互转换
                jq-->js:jq对象[索引] 或者 jq对象.get(索引)
                js-->jq:$(js对象)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入-->
    <script src="js/jquery.min.js"></script>
</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>

    <script>
       //1.通过JS的方式获取名称叫div的所有html元素对象
        var divs = document.getElementsByTagName("div");
        alert(divs.length);//可以当作数组来使用
       //对divs中所有的div 让其标签体内容变为"aaa"
       for (var i = 0; i < divs.length; i++) {
          // divs[i].innerHTML="aaa";
           $(divs[i]).html("ccc");
       }
        //2.通过JQuery的方式获取名称叫div的所有html元素对象
        var $divs = $("div");
        alert($divs.length);//也可以当作数组来使用
        //对divs中所有的div 让其标签体内容变为"bbb"    使用jq的方式
        //$divs.html("bbb");

       $divs[0].innerHTML="ddd";
       $divs.get(1).innerHTML="eee";


    </script>

</body>
</html>

选择器：

筛选具有相似特征的元素(标签)
一、基本语法学习：
1.事件绑定

//1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });

2.入口函数

//jq入口函数（dom文档加载完毕后执行该函数的代码）
$(function () {
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        });

3.样式控制

$(function () {
           // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","pink");
        });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入-->
    <script src="js/jquery.min.js"></script>

    <script>
        //给b1按钮添加单击事件
        /*window.οnlοad=function(){
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        }*/

        //jq入口函数（dom文档加载完毕后执行该函数的代码）
        /*$(function () {
            //1.获取b1按钮
            $("#b1").click(function () {
                alert("abc");
            });
        });*/

        /*
            window.onload 和 $(function)区别
                window.onload 只能定义一次，如果定义多次，后边的会将前边的覆盖掉
                $(function) 可以定义多次
         */

        /*function fun1(){
            alert("abc");
        }

        function fun2() {
            alert("bcd");
        }
        window.οnlοad=fun1;
        window.οnlοad=fun2;*/

        /*$(function () {
            alert(123);
        });
        $(function () {
            alert(234);
        });*/

        $(function () {
           // $("#div1").css("background-color","red");
            $("#div1").css("backgroundColor","pink");
        });

    </script>

</head>
<body>
    <div id="div1">div1...</div>
    <div id="div2">div2...</div>
    <input type="button" id="b1" value="点我">



</body>
</html>

二、分类：

1. 基本选择器
	1.标签选择器（元素选择器）
		语法： $("html标签名") 获得所有匹配标签名的元素
	2.id选择器
		语法：$("#id的属性值") 获得与指定id属性值匹配的元素
	3.类选择器
		语法：$(".class的属性值") 获得与指定的class属性值匹配的元素
	4.并集选择器
		语法：$("选择器1,选择器2...") 获得多个选择器选中的所有元素

    <script>

      $(function () {
          $("#b1").click(function () {
              $("#one").css("backgroundColor","pink");
          });
          $("#b2").click(function () {
              $("div").css("backgroundColor","pink");
          });
          $("#b3").click(function () {
              $(".mini").css("backgroundColor","pink");
          });
          $("#b4").click(function () {
              $("span,#two").css("backgroundColor","pink");
          });
      });

2.层级选择器
	1.后代选择器
		语法：$("A B") 选择A元素内部的所有B元素
	2.子选择器
		语法：$("A > B") 选择A元素内部的所有B子元素

在这里插入图片描述

  $(function () {
            $("#b1").click(function () {
                //改变<body>内的所有<div>的背景颜色为粉色
                $("body div").css("backgroundColor","pink");
            });
            $("#b2").click(function () {
                //改变<body>内的所有的子<div>的背景颜色为粉色
                $("body > div").css("backgroundColor","pink");
            });
        });


3.属性选择器
	1.属性名称选择器
		语法：$("A[属性名称]") 包含指定属性的选择器
	2.属性选择器
		语法：$("A[属性名='值']") 包含指定属性等于指定值的选择器
	3.复合属性选择器
		语法：$("A[属性名='值'][]...") 包含多个属性条件的选择器

$(function () {
          $("#b1").click(function () {
              //含有属性title的div元素的背景色设为pink
              $("div[title]").css("backgroundColor","pink");
          });
          $("#b2").click(function () {
              //title的属性值为test的div元素的背景色设为pink
              $("div[title='test']").css("backgroundColor","pink");
          });
          $("#b3").click(function () {
              //title的属性值不等于test的div元素的背景色设为pink
              $("div[title!='test']").css("backgroundColor","pink");
          });
          $("#b4").click(function () {
              //title的属性值以te开始的div元素的背景色设为pink
              $("div[title^='te']").css("backgroundColor","pink");
          });
          $("#b5").click(function () {
              //title的属性值以est结束的div元素的背景色设为pink
              $("div[title$='est']").css("backgroundColor","pink");
          });
          $("#b6").click(function () {
              //title的属性值以包含es的div元素的背景色设为pink
              $("div[title*='es']").css("backgroundColor","pink");
          });
          $("#b7").click(function () {
              //选取有id属性，并且属性title中包含es的div元素设置背景色设为pink
              $("div[id][title*='es']").css("backgroundColor","pink");
          });
      });

4.过滤选择器
	1.首元素选择器
		语法：:first 获得选择的元素中的第一个元素
	2.尾元素选择器
		语法：:last 获得选择的元素的最后一个元素
	3.非元素选择器
		语法：:not(selecter) 不包括指定类容的元素
	4.偶数选择器
		语法：:even 偶数，从0开始计数
	5.奇数选择器
		语法：:odd 奇数，从0开始计数
	6.等于索引选择器
		语法：:eq(index) 指定索引元素
	7.大于索引选择器
		语法：:gt(index) 大于指定索引元素
	8.小于索引选择器
		语法：:lt(index) 小于指定索引元素
	9.标题选择器
		语法：:header 获得标题元素（h1~h6），固定写法

$(function () {
         $("#b1").click(function () {
             //改变第一个div元素的背景颜色为pink
             $("div:first").css("backgroundColor","pink");
         });
          $("#b2").click(function () {
              //改变最后一个div元素的背景颜色为pink
              $("div:last").css("backgroundColor","pink");
          });
          $("#b3").click(function () {
              //改变class不为one的所有div元素的背景颜色为pink
              $("div:not(.one)").css("backgroundColor","pink");
          });
          $("#b4").click(function () {
              //改变索引值为偶数的所有div元素的背景颜色为pink
              $("div:even").css("backgroundColor","pink");
          });
          $("#b5").click(function () {
              //改变索引值为奇数的所有div元素的背景颜色为pink
              $("div:odd").css("backgroundColor","pink");
          });
          $("#b6").click(function () {
              //改变索引值大于3的所有div元素的背景颜色为pink
              $("div:gt(3)").css("backgroundColor","pink");
          });
          $("#b7").click(function () {
              //改变索引值等于3的所有div元素的背景颜色为pink
              $("div:eq(3)").css("backgroundColor","pink");
          });
          $("#b8").click(function () {
              //改变索引值小于3的所有div元素的背景颜色为pink
              $("div:lt(3)").css("backgroundColor","pink");
          });
          $("#b9").click(function () {
              //改变所有的标题的背景颜色为pink
              $(":header").css("backgroundColor","pink");
          });
      });

5.表单过滤选择器
	1.可用元素选择器
		语法：:enabled 获取可用元素
	2.不可用元素选择器
		语法：:disabled 获取不可用元素
	3.选中选择器
		语法：:checked 获得单选/复选框选中的元素
	4.选中选择器
		语法：:selected 获得下拉框选中的元素

$(function () {
          $("#d1").click(function () {
              //用val方法改变表单内可用的input的值
              $("input[type='text']:enabled").val("aaa");
          });
          $("#d2").click(function () {
              //用val方法改变表单内不可用的input的值
              $("input[type='text']:disabled").val("aaa");
          });
          $("#d3").click(function () {
              //用length属性获取复选框选中的个数
              alert($("input[type='checkbox']:checked").length);
          });
          $("#d4").click(function () {
              //用length属性获取下拉框选中的个数
              alert($("select > option:selected").length);
          });
      });

DOM操作

一、内容操作

1.html()：获取/设置元素的标签体内容 <a> <font>内容</font>  </a>-----><font>内容</font>
2.text()：获取/设置元素的纯文本内容	<a> <font>内容</font>  </a>----->内容
3.val()：获取/设置元素的value属性值

    <script>
        $(function () {
            //获取myinput的value值
            var value = $("#myinput").val();
            alert(value);
            //设置myinput的value值
            $("#myinput").val("李四");

            //获取mydiv的标签体内容
            var html = $("#mydiv").html();
            alert(html);
            //设置mydiv的标签体内容
            $("#mydiv").html("aaa");

            //获取mydiv文本内容
            var text = $("#mydiv").text();
            alert(text);
            //设置mydiv文本内容
            $("#mydiv").text("bbb");

        });

    </script>
    <input id="myinput" type="text" name="username" value="张三" /> <br>
    <div id="mydiv"><p><a href="#">标题标签</a> </p></div>

二、属性操作

1.通用属性操作
	1.attr（）：获取/设置元素的属性值
	2.removeAttr（）：删除属性
	3.prop（）：获取/设置元素的属性值
	4.removeProp（）：删除属性
	5.attr和prop的区别？
		1.如果操作的是元素的固有属性，则建议使用prop
		2.如果操作的是元素自定义的属性，则建议使用attr

<script>
        $(function () {
            // //获取北京节点的name属性值
            // var name = $("#bj").attr("name");
            // alert(name);
            // //设置北京节点的name属性值为dabeijing
            // $("#bj").attr("name","dabeijing");
            // //新增北京节点的discription属性 属性值是didu
            // $("#bj").attr("discription","didu");
            // //删除北京节点的name属性并检验name属性是否存在
            //$("#bj").removeAttr("name");
            //获取hobby的选中状态
            var prop=$("#hobby").prop("checked");
            alert(prop);
        });



    </script>

    <ul>
        <li id="bj" name="beijing" xxx="yyy">北京</li>
        <li id="tj" name="tianjin">天津</li>
    </ul>
    <input type="checkbox" id="hobby">

2.对class属性操作 
	1.addClass（）：添加class属性值
	2.removeClass（）：删除class属性值
	3.toggleClass（）：切换class属性
		toggleClass("one")：
			判断如果元素对象上存在class="one"，则将属性值删掉。如果元素对象上不存在class="one"，则添加
	4.css():

$(function () {
            $("#b1").click(function () {
                //采用属性增加样式（改变id=one的样式）
                $("#one").prop("class","second");
            });
            $("#b2").click(function () {
                //addClass
                $("#one").addClass("second");
            });
            $("#b3").click(function () {
                //removeClass
                $("#one").removeClass("second");
            });
            $("#b4").click(function () {
                //样式切换
                $("#one").toggleClass("second");
            });
            $("#b5").click(function () {
                //通过css（）获得id为one的背景颜色
                alert($("#one").css("backgroundColor"));
            });
            $("#b6").click(function () {
                //通过css（）设置id为one的背景颜色为绿色
                $("#one").css("backgroundColor","green");
            });
        });

三、CRUD操作

1.append（）：父元素将子元素追加到末尾
	对象1.append(对象2)：将对象2添加到对象1元素内部，并且在末尾
2.perpend（）：父元素将子元素追加到开头
	对象1.perpend(对象2)：将对象2添加到对象1元素内部，并且在开头
3.appendTo（）：
	对象1.appendTo(对象2)：将对象1添加到对象2内部，并且在末尾
4.perpendTo（）：
	对象1.perpendTo(对象2)：将对象1添加到对象2元素内部，并且在开头
5.after（）：添加元素到元素后边
	对象1.after（对象2）：将对象2添加到对象1后边。对象2和对象1是兄弟关系
6.before（）：添加元素到元素的前边
	对象1.brfore（对象2）：将对象2添加到对象1前边。对象2和对象1是兄弟关系
7.insertAfter（）：
	对象1.insertafter（对象2）：将对象1添加到对象2后边。对象2和对象1是兄弟关系
8.insertBefore（）：
	对象1.insertbrfore（对象2）：将对象1添加到对象2前边。对象2和对象1是兄弟关系
9.remove（）：移除元素
	对象.remove（）：将对象删除掉
10.empty（）：清空元素的说有后代元素
	对象.empty（）：将对象的后代元素都清空，但保留当前对象以及其属性节点

$(function () {
            //将反恐放置到city后边
            $("#b1").click(function () {
                //append
                $("#city").append($("#fk"));
                //appendTo
                $("#fk").appendTo($("#city"));
            });
            //将反恐放置到city的前面
            $("#b2").click(function () {
                //perpend
                $("#city").perpend($("#fk"));
                //prependTo
                $("#fk").prependTo($("#city"));
            });
            //将反恐插入到天津后边
            $("#b3").click(function () {
                //after
                $("#tj").after($("#fk"));
                //insertAfter
                $("#fk").insertAfter($("#tj"));
            });
            //将反恐插入到天津前边
            $("#b4").click(function () {
                //before
                $("#tj").before($("#fk"));
                //insertBefore
                $("#fk").insertBefore($("#tj"));
            });
            //删除li北京
            $("#b5").click(function () {
                $("#bj").remove();
            });
            //删除city的所有li节点，清空city里边所有元素
            $("#b5").click(function () {
                $("#city").empty();
            });
        });