JQuery

zzj

一、jquery对象

1.1 下载与引用

使用jquery之前应该先下载相应的js，之后将下载的js引入页面

//在head中引入
<script type="text/javascript" src="js/jquery-3.5.1.min.js" ></script>

1.2 jquery核心

**$符号在jquery中代表对jquery对象的引用，jquery是核心对象。**通过该对象可以获取jQuery对象，调⽤jQuery提供的⽅法等。只jQuery对象才能调⽤jQuery提供的⽅法。

1.3 DOM对象与Jquery对象

通过js代码获取的对象都是DOM对象，通过jquery获取的对象都是jquery包装集对象。

两者的区别：

	DOM对象	jquery对象
获取对象	如果元素存在，则获取dom对象，如果元素不存在，值为null	如果元素存在，获取的是结果集对象，元素不存在，获取到空结果集
判断数据是否存在	js中直接判断对象是否为空	jquery中需要判断结果集对象的长度>0 有对象

1.3.1 jquery包装集对象

<script type="text/javascript">
    var jqueryObject=$("#testDiv");
</script>

1.3.2 DOM对象转jquery对象

利用$()方法进行包装

<script type="text/javascript">
    var domDiv = document.getElementById('mydiv'); // 获取Dom对象
    var mydiv2 = $(domDiv);
</script>

二、jquery选择器

2.1 基础选择器

选择器	名称	实例
id选择器	#id	$("#mydiv1")
元素名称选择器	element	$(“div”)
类选择器	.class	$(".blue")
选择所有元素	*	$("*")
组合选择器	#id,element,.class	$("#mydiv1,span,.blue")
属性选择器	[name=元素名称]	$("[name=uname]")

<div id="mydiv1">id选择器1<span>span中的内容</span></div>
<div id="mydiv2" class="blue">元素选择器</div>
<span class="blue">样式选择器</span>

<script type="text/javascript">
    //id选择器
    var newId=$("#mydiv1");
    console.log(newId);
    //元素元素名称选择器	
    var newDiv=$("div");
    console.log(newDiv);
    //类选择器	
    var newClass=$(".blue");
    console.log(newClass);
    //选择所有元素
    var all=$("*");
    console.log(all);
    //组合选择器
    var zh=$("#mydiv1,span,.blue");
    console.log(zh);
</script>

2.2 层次选择器

选择器	名称	实例
后代选择器	ancestor descendant	$("#parent div")
⼦代选择器	parent > child	$("#parent>div")
相邻选择器	prev + next	$("#child + div")
同辈选择器	prev ~ sibling	$(".gray ~ img")

<div id="parent">层次择器
    <div id="child" class="testColor">父选择器
        <div class="gray">子选择器</div>
        <img src="http://www.baidu.com/img/bd_logo1.png" 
             width="270" height="129" />
        <img src="http://www.baidu.com/img/bd_logo1.png" 
             width="270" height="129" />
    </div>	
    <div>
        选择器2<div>选择器2中的div</div>
    </div>
</div>

<script type="text/javascript">
    var hd=$("#parent div");
    console.log(hd);//4个元素,总div下所有的div标签

    var zd=$("#parent>div");
    console.log(zd);//2个元素，总div下第一代div标签

    var xl=$("#child + div");
    console.log(xl);//1个元素

    var tb=$(".gray ~ img");
    console.log(tb);//2个元素
</script>

2.3 表单选择器

Forms	名称	实例
表单选择器	:input	查找所有的input元素：$(":input")；注意：会匹配所有的input、textarea、select和button元素。
⽂本框选择器	:text	查找所有⽂本框：$(":text")
密码框选择器	:password	查找所有密码框：$(":password")
单选按钮选择器	:radio	查找所有单选按钮：$(":radio")
复选框选择器	:checkbox	查找所有复选框：$(":checkbox")
提交按钮选择器	:submit	查找所有提交按钮：$(":submit")
图像域选择器	:image	查找所有图像域：$(":image")
重置按钮选择器	:reset	查找所有重置按钮：$(":reset")
按钮选择器	:button	查找所有按钮：$(":button")
⽂件域选择器	:file	查找所有⽂件域：$(":file")
被checked选择器	:checked	查找所有被checked：$(":checked")
被selected选择器	:selected	查找所有被selected：$(":selected");

三、jquery中属性与元素的操作

**注意：**对jquery中的属性或元素进行操作，使用的都是方法，并且应该使用jquery对象去引用这些方法。

3.1 操作元素的属性

属性分类：

属性分类	描述
固有属性	元素自带的属性
自定义属性	自己设置的属性名和属性值
属性值为boolean类型的属性	checked selected disabled

操作属性：（获取属性）

方法	描述
jquery对象.attr(“属性名”)	可以操作固有属性，自定义属性。 获取boolean类型的属性值，如果属性存在，返回具体的值; 如果不存在 则返回undefined。
jquery对象.prop(“属性名”)	可以操作固有属性，不可以操作自定义属性。 获取boolean类型的属性值，如果属性存在，返回true; 如果不存在 返回false。

<form action="" id="myform">
    <input type="checkbox" id="aa" data="标签1" name="ch" value="1" checked="checked"/>	aa
    <input type="checkbox" id="bb" data="标签2" name="ch" value="2"/>	bb
    <input type="checkbox" name="ch1" />	cc
</form>
<script type="text/javascript">
    var aa=$("#aa");
    var bb=$("#bb");
    //获取固有属性
    console.log(aa.attr("name"),aa.attr("value"));
    console.log(bb.prop("name"),bb.prop("value"));

    //获取自定义属性
    console.log(aa.attr("data"));
    console.log(bb.prop("data"));//undefined

    //操作boolean类型的数据,查看是否被选中
    console.log(aa.prop("checked"),aa.attr("checked"));
    console.log(bb.prop("checked"),bb.attr("checked"));
</script>

设置属性：

方法
jquery对象.attr(‘属性名’,‘属性值’)
jquery对象.prop(‘属性名’,‘属性值’) 注意：不能设置自定义的属性

<script type="text/javascript">
    //设置属性
    var cc=$("[name=ch1]");
    //操作自定义属性
    cc.attr("data1","标签三");
    cc.prop("data2","自定义标签三");
    //操作固定属性
    cc.attr("id","bq3");
    cc.prop("value","bq3");//会设置失败
    //操作boolean值的属性
    //cc.attr("checked","checked");
    cc.prop("checked",true);
</script>

移除属性

方法	说明	举例
jquery对象.removeAttr(“属性名”)	移除指定的属性	cc.removeAttr(‘checked’)

3.2 操作元素的样式(对class进行操作)

方法	说明	举例
attr(“class”)	获取class属性的值，即样式名称	cb.attr(“class”)
attr(“class”,”样式名”)	修改class属性的值，修改样式 会覆盖原有样式	cb.attr(“class”,“green”)
addClass(“样式名”)	添加样式名称	cr.addClass(“larger”)
css()	添加具体的样式	cr.css(“color”,“red”);
removeClass(class)	移除样式名称	cr.removeClass(“larger”);

<style type="text/css">
    div{
        padding: 8px;
        width: 180px;
    }
    .blue{
        background: blue;
    }
    .larger{
        font-size: 30px;
    }
    .green {
        background : green;
    }
</style>

<h3>css()方法设置元素样式</h3>
<div id="conBlue" class="blue larger">天蓝色</div>
<div id="conRed">大红色</div>
<div id="con" class="blue green">没有颜色</div>
<div id="remove" class="blue larger">天蓝色</div>

<script type="text/javascript">
    var cb=$("#conBlue");
    var clas=cb.attr("class");
    console.log(clas);

    cb.attr("class","green");

    var cr=$("#conRed");
    cr.addClass("larger")

    var cn=$("#con");
    cn.addClass("green");
    cn.addClass("blue");

    cr.css("color","red");
    //同时添加多个样式时，样式名称和样式值用冒号隔开
    cr.css({
        "background-color":"blue",
        "font-family":"华文新魏"
    });

    cr.removeClass("larger");
</script>

3.3 操作元素的内容

方法	说明
html()	获取元素的html内容，包括标签
html(“html内容”)	设置元素的html内容，内容中可添加标签
text()	获取元素的⽂本内容，不包含html
text(“text内容”)	设置元素的⽂本内容，不包含html
val()	获取元素value值
val(“值”)	设定元素的value值

<h3><span>html()和text()方法设置元素内容</span></h3>
<div id="html"></div>
<div id="text"></div>
<input type="text" name="uname" value="oop" />

<script type="text/javascript">
    var h3=$("h3");
    console.log(h3.html());
    console.log(h3.text());//包含里面的span标签

    $("#html").html("<h2>html()和text()方法设置元素内容</h2>");//标签演化为效果显示
    $("#text").text("<h2>html()和text()方法设置元素内容</h2>");//标签原样输出

    console.log($("[name='uname']").val());
    $("[name='uname']").val("admin");
</script>

3.4 添加元素

方法	说明
prepend(content)	在被选元素内部的开头插入元素或内容，可以是字符、HTML 元素标记。
$(content).prependTo(selector)	把 content 元素或内容加入 selector 内部的元素的开头
append(content)	在被选元素内部的尾部插入元素或内容，可以是字符、HTML 元素标记。
$(content).appendTo(selector)	把 content 元素或内容加入 selector 内部的元素的尾部
$(selector).before(content)	在元素前插入指定的元素或内容（是在外部）
$(selector).after(content)	在元素后插入指定的元素或内容（是在外部）

<style type="text/css">
    div	{
        margin: 10px 0px;
    }
    span{
        color: white;
        padding: 8px
    }
    .red{
        background-color: red;
    }
    .blue{
        background-color: blue;
    }
    .green{
        background-color: green;
    }
</style>

<h3>prepend()方法前追加内容</h3>
<h3>prependTo()方法前追加内容</h3>
<h3>append()方法后追加内容</h3>
<h3>appendTo()方法后追加内容</h3>
<span class="red">男神</span>
<span class="blue">偶像</span>
<div class="green">
    <span >小鲜肉</span>
</div> 

<script type="text/javascript">
    console.log($("<h2>jquery</h2>"));

    //内部前追加
    var str1 = "<span >卢本伟</span>";
    $(".green").prepend(str1);

    //内部前追加
    var str2 = "<span >PDD</span>";
    $(str2).prependTo($(".green"));

    //内部后追加
    var str3 = "<span >马飞</span>"; 
    $(".green").append(str3);

    //内部后追加
    var str4 = "<span >大司马</span>";
    $(str4).appendTo($(".green"));

    $(".red").before("<span class='red'>男神</span>");

    $(".blue").after("<span class='red'>屌丝</span>")
</script>

3.5 遍历与删除元素

遍历元素：

each()

$(selector).each(function(index,element)) :遍历元素

参数 function 为遍历时的回调函数，

index 为遍历元素的序列号，从 0 开始。

element是当前的元素，此时是dom元素

<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>

<script type="text/javascript">
    //遍历
    $("span").each(function(index,element){
        console.log(index);
        console.log(element);
        console.log(index+"---->"+$(element).text());
    });
</script>

删除元素：

方法	说明
remove()	删除所选元素或指定的⼦元素，包括整个标签和内容⼀起删。
empty()	清空所选元素的内容。

<style type="text/css">
    span{
        color: white;
        padding: 8px;
        margin: 5px;
        float: left;
    }
    .green{
        background-color: green;
    }
    .blue{
        background-color: blue;
    }
</style>

<h3>删除元素</h3>
<span class="green">jquery<a>删除</a></span>
<span class="blue">javase</span>
<span class="green">http协议</span>
<span class="blue">servlet</span>

<script type="text/javascript">
    $(".green").remove();
    $(".blue").empty();
</script>

四、jquery事件（click等等）

4.1 ready加载事件

**注意：**ready在onload之前执行，一般情况下这两种加载事件只会使用一种即可

ready加载事件	onload加载事件
网页中dom结构加载完毕后执行	网页中dom结构与引入的资源加载完毕之后执行

格式：$(document).ready(function(){ });

​ $(function(){ })

4.2 bind()绑定事件

4.2.1 绑定单个事件

<button type="button" id="i1">按钮1</button>
<button type="button" id="i2">按钮2</button>
<button type="button" id="i3">按钮3</button>
<button type="button" id="i4">按钮4</button>

<script type="text/javascript">
    $("#i1").bind("click",function(){
        console.log("按钮1点击事件");
    });
</script>

4.2.2 绑定多个事件

方式一：

<script type="text/javascript">
    $("#i2").bind("click",function(){
        console.log("按钮2点击事件");
    }).bind("mouseover",function(){
        console.log("按钮2鼠标悬停事件");
    });
</script>

方式二：(冒号的位置记得加)

<script type="text/javascript">
    $("#i3").bind({
        "click":function(){
            console.log("按钮3点击事件");
        },
        "mouseout":function(){
            console.log("按钮3移开事件");
        }
    });
</script>

方式三：

<script type="text/javascript">
    $("#i4").click(function(){
        console.log("按钮4点击事件");
    }).mousemove(function(){
        console.log("按钮4鼠标移动事件");
    });
</script>

五、jqueryAjax(重)

同步方式：客户机就要等到服务器返回消息后才去执行其他操作。

异步方式：客户机就不等待服务器的响应。

**注意：**这是异步无刷新技术，例如：QQ给别的动态留言，留言完毕后，我们可以看到自己所写的留言，但是这个时候QQ空间并没有刷新。

5.1 $.ajax({})

格式：

格式：$.ajax({});
参数：
type：请求⽅式 GET/POST
url：请求地址 url
async：是否异步，默认是 true 表示异步，可以省略不写
data：发送到服务器的数据，可以省略不写
dataType：预期服务器返回的数据类型
contentType：设置请求头，可以省略不写
success：请求成功时调⽤此函数
error：请求失败时调⽤此函数，可以省略不写

<script type="text/javascript">
    $.ajax({
        type:'GET',
        url:'js/data.json',//这个是自己创建的json文件
        data:{
            uname:'admin',
            upwd:'1234'
        },
        dataType:'json',
        success:function(data){
            console.log(data);
        }
    });
</script>

5.2 $.get()

<script type="text/javascript">
    $.get("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

5.3 $.post()

<script type="text/javascript">
    $.post("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

5.4 $.getJSON()

<script type="text/javascript">
    $.getJSON("js/data.json",{uname:'admin'},function(data){
        console.log(data);
    });
</script>

5.5 jqueryAjax例子

<div id="test">

</div>
<script type="text/javascript">
    $.ajax({
        type:'GET',
        url:'js/Data.json',//这个是自己创建的json文件
        data:{},
        dataType:'json',
        success:function(data){
            console.log(data);
            //解析数据，将数据追加到div中
            loadData(data);
        }
    });

    function loadData(data){
        if(data.code==1){
            //创建表格
            var table="<table width='600' align='center' border='1' 
                         style='border-collapse: collapse;'></table>";
            //表头
            var tbhead="<tr><th>编号</th><th>用户名</th><th>密码</th><th>年龄</th><th>性别                            </th><th>操作</th></tr>";
            //表格中追加表头
            $(table).append(tbhead);
            //解析数据
            if(data.result.length>0){
                for (var i = 0; i < data.result.length; i++) {
                    var user=data.result[i];
                    var uid=user.uid;
                    var uname=user.uname;
                    var upwd=user.upwd;
                    var uage=user.uage;
                    var usex=user.usex?"男":"女";

                    var str="<tr align='center'><td>"+uid+"</td><td>"+uname+"</td>		                              <td>"+upwd+"</td><td>"+uage+"</td><td>"+usex+"</td></tr>";
                    $(table).append(str);
                }
            }
            $("#test").append($(table));
        }else{
            var str="<h2 align='center'>"+data.msg+"</h2>";
            $("#test").append(str);
        }
    }
</script>