2022-03-03 22:01 已编辑集美大学后端

关注

<span>jQuery基础&选择器</span>

jQuery基础&选择器

一、概述

jquery是js的框架
jquery和js的相互转换？ js转换为jquery : $(js对象) jquery转换为js : jquery对象[0] / jquery对象.get(0)
js和jquery对象的方法是不通用的！！！
jquery如何获取/设置值： .val(内容)
jquery如何获取/设置内容： .html(内容) .text(内容)
jquery操作属性： attr("属性名") attr("属性名","属性值”) removeAttr("属性名")
jquery如何操作样式： css("样式名") css("样式名","样式值")
jquery的选择器：比js更方便的选择标签

基本选择器、层次选择器、过滤器、表单选择器

二、js对象和jquery对象的相互转换

js对象和jquery对象是不同的，使用不同的属性和方法；但是他们又是可以相互转换的！！！

js对象转换为jquery对象 $(js对象)
jquery对象转换为js对象 jquery对象[0] jquery对象.get(0)

<head>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function(){
            //id选择器
            var name1 = document.getElementById("username");
            var name = $("#username");

            console.log(name1.value); //js对象
            console.log(name.val()); //jq对象
            console.log($(name1).val()); //js对象转化为jq对象
            console.log(name.get(0).value); //jq对象转化为js对象
        })
    </script>
</head>
<body>
    <input type="" name="" id="username" value="jack" />
</body>

三、jquery的几种用法

1、获取/设置值的用法

val(): 获取value值 
val(内容)：设置value值

2、使用jquery获取/设置标签内容的值

html(): 获取内容值,包含标签 
html(内容)：设置内容值     
text(): 获取内容值，不包含标签 
text(内容)：设置内容值

3、操作标签属性

1、获取属性内容 attr("属性名")：
2、设置属性 attr("属性名","属性值")：
3、设置多个属性：attr({                
    "属性名":"属性值",                
    "属性名1":"属性值1",                
    "属性名2":"属性值2"                
}) 
4、移除属性 removeAttr("属性名")：

<head>
    <title>控制div块的显示和隐藏</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            text-align: center;
        }
        #div1{background-color: yellow;}
        #div2{background-color: aqua;}
        #div3{background-color: greenyellow;}
        .hide{
            /* color: red; */
            /* none:隐藏 。block*/
            display: none;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            var show = $("#show");
            var hide = $("#hide");
            var div1 = $("#div1");
            var div2 = $("#div2");
            show.click(function(){
                div1.removeAttr("class");
            })
            hide.click(function(){
                div1.attr("class","hide");
            })
        })
    </script>
</head>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <div id="div1" class="">python</div>
    <div id="div2">java</div>
    <div id="div3">html</div>
</body>

4、操作css样式

.css("样式名");       获取某个样式的值 
.css("样式名","值");  设置某个样式的

<head>
    <meta charset="utf-8">
    <title>图片的展示</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            text-align: center;
        }
        #div1{background-color: yellow;}
        #div2{background-color: aqua;}
        #div3{background-color: greenyellow;}

        .hide{
            /* color: red; */
            /* none:隐藏 。block*/
            display: none;
        }

    </style>
    <script type="text/javascript">
        $(function(){
            var show = $("#show");
            var hide = $("#hide");
            var div1 = $("#div1");
            var div2 = $("#div2");
            show.click(function(){
                div1.removeAttr("class");
            })
            hide.click(function(){
                div1.attr("class","hide");
            })

        })
    </script>
</head>
<body>
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <div id="div1" class="">python</div>
    <div id="div2">java</div>
    <div id="div3">html</div>
</body>

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        img{
            height: 300px;
            weight: 300px;
        }
    </style>
    <script type="text/javascript">
        $(function(){
            //获取元素
            var title = $("#title");
            var image = $("#image");
            var pre = $("#pre");
            var next = $("#next");
            //图片编号(一共3张)
            var index = 2;

            pre.click(function(){
                image.attr("src","img/"+index+".jpg");
                title.text(image.attr("src").substr(4,5)); //stringObject.substr(start,length)
                //if(index=1) index = 4; =是赋值，==是判断
                if(index==1) index = 4;
                index--;

            })
            next.click(function(){
                image.attr("src","img/"+index+".jpg");
                title.text(image.attr("src").substr(4,5));
                if(index==3) index = 0;
                index++;

            })
        })
    </script>
</head>
<body>
    <h3 id="title">图片展示</h3>
    <p><img id="image" src="img/1.jpg" /></p>
    <p>
        <button type="button" id="pre">上一个</button>
        <button type="button" id="next">下一个</button>
    </p>
</body>

四、jquery选择器

1、基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器

2、层次选择器

<head>
    <meta charset="utf-8">
    <title></title>
    <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            //div1下的所有p
            console.log($("#div1 p")); //p1-p5 ; 
            //子选择器
            console.log($("#div1>p"));//p1-p4
            //相邻元素选择器
            console.log($("#p1+p"));//p2(与p1相邻的下一个是p2)
            //同辈元素选择器
            console.log($("#p1~p")); //p2-p4
        })
    </script>
</head>
<body>
    <h1>层次选择器</h1>
    <div id="div1" style="border: 3px solid red;width: 500px;height: 500px;">
        我是id="div1"的div
        <p id="p1" style="border: 3px solid green;width: 251px;">
            我是id="p1"的p
        </p>
        <p id="p2" style="border: 3px solid green;width: 251px;">
            我是id="p2"的p
        </p>
        <p id="p3" style="border: 3px solid green;width: 251px;">
            我是id="p3"的p 
        </p>
        <p id="p4" style="border: 3px solid green;width: 251px;">
            我是id="p4"的p
        </p>
        <div id="div2" style="border: 3px solid yellow;width: 400px;">
            我是id="div2"的div
            <p id="p5" style="border: 3px solid pink;width: 251px;">
                我是id="p5"的p
            </p>
        </div>
    </div>
</body>

3、过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，都以一个 :冒号开头。
按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

	<head>
        <meta charset="utf-8">
        <title>过滤选择器</title>
        <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {
                console.log($("li:first").text()); //西游记
                console.log($("li:last").text()); //三国演义

                //:eq(index)：表示选取索引等于index的元素，索引从0开始
                console.log($("li:eq(1)").text()); //水浒传
                //:gt(index)：表示选取索引大于index的元素，索引从0开始
                console.log($("li:gt(1)").text()); //红楼梦 三国演义
                //:lt(index)：表示选取索引小于index的元素，索引从0开始
                console.log($("li:lt(1)").text()); //西游记


                //even：表示选取索引是偶数的元素，索引从0开始，看到的效果是选择了奇数行
                console.log($("li:even").text()); //西游记 红楼梦
                //odd：表示选取索引是奇数的元素，索引从0开始，看到的效果是选择了偶数行
                console.log($("li:odd").text()); //水浒传 三国演义

            })
        </script>
</head>
<body>
    <ul>
        <li>西游记</li>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>三国演义</li>
    </ul>
</body>

案例：控制灯泡

五、文档处理

六、遍历

<script type="text/javascript">
    $(function(){
        var lis = $("li");
        //this DOM对象
        //$(this) jQuery对象
        lis.each(function(){
            console.log(this.innerText);
            console.log($(this).text()); //两个输出相同
        });
        console.log("------------");
        //element DOM对象
        lis.each(function(index, element){
            console.log(index+" "+element.innerText);
        })
    });
</script>

<body>
    <ul id="ul">
        <li>西游记</li>
        <li>水浒传</li>
        <li>红楼梦</li>
        <li>三国演义</li>
    </ul>
</body>

七、GET 和 POST 方法的区别

1、发送的数据数量

在 GET 中，只能发送有限数量的数据，因为数据是在 URL 中发送的。

在 POST 中，可以发送大量的数据，因为数据是在正文主体中发送的。

2、安全性

GET 方法发送的数据不受保护，因为数据在 URL 栏中公开，这增加了漏洞和黑客攻击的风险。

POST 方法发送的数据是安全的，因为数据未在 URL 栏中公开，还可以在其中使用多种编码技术，这使其具有弹性。

3、加入书签中

GET 查询的结果可以加入书签中，因为它以 URL 的形式存在；而 POST 查询的结果无法加入书签中。

4、编码

在表单中使用 GET 方法时，数据类型中只接受 ASCII 字符。

在表单提交时，POST 方法不绑定表单数据类型，并允许二进制和 ASCII 字符。

5、可变大小

GET 方法中的可变大小约为 2000 个字符。

POST 方法最多允许 8 Mb 的可变大小。

6、缓存

GET 方法的数据是可缓存的，而 POST 方法的数据是无法缓存的。

7、主要作用

GET 方法主要用于获取信息。而 POST 方法主要用于更新数据。

八、jquery-Ajax

九、form表单序列化

1.serialize()方法

　　格式：var data = $("#form").serialize();

　　功能：将表单内容序列化成一个字符串。

　　这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("#form").serialize() 即可。

2.serializeArray()方法

　　格式：var jsonData = $("#form").serializeArray();

　　功能：将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。

　　比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name

<form action="" id="form">
    用户名：<input name="name" type="text" /><br />
    密 码：<input name="pass" type="text" /><br />
</form>
<input type="button" id="sub" value="提交" /> <br />
<p id="result"></p>

<script>
    $(function () {
        $("#sub").click(function () {
            var user = $("#form").serialize();

            $.ajax({
		type: "post",
		url: "user/login",
		data:user,
		success: function(data) {
		    if (data.trim()=="success"){
                        location.href = "index.html"
                    }else {
			alert("用户名或密码错误");
                    }
		}
	     });	

        });
    });
</script>