jquery基础入门

Web全栈笔记

2020-06-04

一、jquery介绍和引用

jQuery是目前使用最广泛的javascript函数库

jQuery的版本分为1.x系列和2.x，3.x系列，1.x系列兼容低版本的游览器，2.x和3.x系列放弃支持低版本游览器，目前使用最多的是1.x系列

引入页面
jQuery是一个函数库，一个js文件，页面用script标签引入这个js文件就可以使用

<script type="text/javascript" src="./jquery-1.12.4.min.js"></script>

二、jquery选择器

jQuery用法思想就是通过选择器选择某个元素，然后对它进行某种操作

1、jquery基本的选择器

// id选择器
$("#id")

// 类选择器
$(".class")

// 标签选择器
$("p")

// 层级选择器
$("ul li span")

// 属性选择器
$("input[name=user]")

2、选择同胞和父辈元素

<!-- HTML -->
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">
    <p class="p1">行元素</p>
    <ul>
        <li>学校</li>
        <li>曹彰</li>
        <li>操场</li>
        <li >班级</li>
        <li>学生</li>
    </ul>
</div>
<div class="div4">div4</div>
</body>

// 选择div元素前面紧挨着的同辈元素
$(".div2").prev();

// 选择div前的所有同辈元素
$(".div4").prevAll();

// 选择div后面仅挨着的同辈元素
$(".div2").next();

// 选择div后面所有的同辈元素
$(".div1").nextAll();

// 选择li的父元素
$("li").parent();

// 选择所有div的所有子元素
 $(".div3").children();
 
// 选择div的同级元素
$(".div3").siblings();

// 选择div3内的ul
// find()在当前选中元素的上下文中找到符合条件的后代，返回的是子元素,也就找到的ul元素
$("div3").find("ul");

3、过滤选择器

// 选择包含p标签元素的div元素
$(".div3").has("p");

// 选择class不等与div3的div元素
 $("div").not(".div3");
 
// 选择class等于div3的div元素
// filter()过滤DOM元素包装集，是指操作当前元素集，删除不匹配的元素，得到一个新的集合
$("div").filter(".div3");
 
// 重点：根据选择集的索引选择元素
$("div").eq(2);

4、获取元素的索引值

有时候需要获的匹配元素相对于其他元素的索引位置，此时可以使用index方法获取

<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3"></div>

alert($(".div2").index()) //弹出1

三、jquery操作样式

1、获取元素样式

<div class="div1" style="width: 200px;height: 50px;background: #0033cc">div1</div>

// 获取div的样式
alert($(".div1").css("width"));
alert($(".div1").css("background"));

2、修改样式

// 修改样式只需要在css()中，添加一个对象即可。
 $(".div1").css({background: "red",width:"500px"})

3、添加或移除class属性

一般我要设置一个帮了该class属性的css样式，通过添加或者移除的方式来动态切换该元素的css样式

<!-- css样式-->
<style type="text/css">
        .div10{
            width: 500px;
            height: 100px;
            background: red;
        }
</style>

<!-- html-->
<div class="div4">div4</div>
<div>动态div</div>

// 添加class属性
$(".div4").next().click(function () {
    $(".div4").next().addeClass("div10")
})

// 移除class属性
$(".div4").next().click(function () {
    $(".div4").next().removeClass("div10")
})


// 添加删除来回切换
$(".div4").next().click(function () {
    $(this).toggleClass("div10")
})

四、绑定click事件

1、可元素绑定click事件可以用如下方法

// 通过选择器定位元素然后调用click方法，click内传一个function
// function内可以使用$(this)代表选择元素，然后在点击后的一系列操作

$(".div4").next().click(function () {
    $(this).toggleClass("div10")
})

2、jquery链式动用

jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连起来写

// 第二个li标签的下一个li修改了样式隐藏，它的同胞节点的子节点隐藏和显示切换
$("li").eq(2).next().css().parent().hide().siblings().children().toggle()

案例一：菜单莱切换，点击展开菜单1的子元素，在点击菜单2，展开菜单2子元素的同时，菜单1自动收起（隐藏）子元素
弹出框的制作：通过点击确定按钮或者x号，自动隐藏弹窗，也就是点击后找到它的父节点隐藏

五、jquery操作属性

方法	描述
attr()	设置或者返回元素属性和值
removeAttr()	从所有匹配的元素移除指定属性

// 案例
// HTML
<input type="text" id="name" value="米"><br>
<button class="show" type="button">显示姓名</button>

// 点击按钮的时候，获取input标签的type属性
$(".show").click(function () {
    alert($("input").attr("type"))
})

// 点击按钮的时候，把input标签的type属性改成password
$(".show").click(function () {
    $("input").attr("type","password")
})

// 点击按钮的时候移除掉input标签的value属性
$(".show").click(function () {
    $("input").removeAttr("value")
})

六、jquery操作元素

1、获取文本内容

方法	描述
text()	设置或返回所选元素的文本内容
html()	设置或返回所选元素的内容(包括HTML)
val()	设置或返回表单字段的值

// 案例text()，html()方法实例
// HTML元素
<div class="edit">
    <a>获取内容1</a>
    <a>获取内容2</a>
    <a>获取内容3</a>
    <a>获取内容4</a>
</div>

// text()方法实例
// 点击后获取元素的文本内容
$(".edit").click(function () {
    alert($(this).text()); 
})

// 点击后修改元素的文本内容，会清楚内部所有子节点，变更成新的文本内容
$(".edit").click(function () {
    $(this).text("新文本内容"); 
})

// 如何在原始文本的内容添加呢
// 在text方法传一个回调函数，接收两个参数
// index : 索引 0
// Text : 原始的文本内容
$(".edit").click(function () {
    $(this).text(function (index, Text) {
        return Text + "新的文本"
    })
})

// html方法实例
// 和text()使用一摸一样
// 1、直接调用方法是获取选中元素的所有子元素
// 2、方法内传参数则把子元素替换成新添加的
// 3、在元素子元素上添加，html()方法一样传一个调函
//  数设置index，和Text 两个参数，此时Text代表原始多有子元素，return Text+"<a>新添加的</a>"即可
// 一般添加html我们也不适用这个方法使用下面将说到的四个方法来添加html内容
// 所以我们用的更多时获取

// val()方法
// HTML
<input type="text" id="name" value="米"><br>
<button class="show" type="button">显示姓名</button>

// 点击按钮时获取输入框的内容
$(".show").click(function () {
    alert($("input").val())
})

// 点击按钮时设输入框内容
$(".show").click(function () {
    $("input").val("输入框设置jq内容")
})

// 如何保留原来的输入框内容，思路和前面两个方法逸一样
// 方法内设置传一个回调函数，设置参数index和Text
// Text 就代表原来的文本内容
$(".show").click(function () {
    var ele = $("input");
    ele.val(function (index,Text) {
        return index+Text+"jq输入框新设置内容"
    })
})

2、添加新的HTML内容

方法	描述
append()	在被选元素内部的尾部添加子元素
prepend()	在被选元素内部的开头添加子元素
after()	在被元素之后添加一个同级元素
before()	在被元素之前添加一个同级元素

3、删除元素/内容

方法	描述
remove()	删除被选元素(包括子元素)
empty()	删除被选元素的子元素（置空的意思）

// 案例
// HTMl元素
<ol>
    <li>1111111111</li>
    <li>22222222222</li>
    <li class="li_end">333333333</li>
</ol>
<button class="b_4" type="button">结尾追加</button>
<button class="b_5" type="button">开始追加</button>
<button class="b_6" type="button">之后最佳</button>
<button class="b_7" type="button">之前追加</button>
<button class="b_8" type="button">删除元素</button>
<button class="b_9" type="button">删除子元素</button>

// append()：末尾添加子元素
$(".b_4").click(function () {
    $("ol").append("<li class=‘sfa‘>追加内容</li>")
});

// prepend()：开始添加子元素
$(".b_5").click(function () {
    $("ol").prepend("<li>追加内容</li>");
});

// after():同级后面添加元素
$(".b_6").click(function () {
    $("ol").after("<li>追加内容</li>");
});

// before(): 同级前面添加元素
$(".b_7").click(function () {
    $("ol").before("<li >追加内容</li>");
});

// remove()：删除元素，删我们append添加的元素
$(".b_8").click(function () {
    $("li").remove(".sfa");
});

// empty():置空ol元素（删除所有的li元素）
$(".b_9").click(function () {
    $("ol").empty();
});

七、jquery效果函数

方法	描述
animate()	对被元素应用自定义的动画
fadeln()	逐渐改变元素的透明度，从隐藏到可见
fadeout()	逐渐改变元素的透明度，从可以减到隐藏
hide()	隐藏备选元素
show()	显示备选元素
toggle()	对被选元素进行隐藏和显示切换
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对备选元素进行滑动隐藏和滑动显示切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在备选元素上运行动画

八、jquery事件

具体详细内容请参考jQuery在线手册即可，有详细的说明

方法	描述
click()	鼠标点击事件
change()	元素改变时触发
mousemove()	鼠标进入（进去子元素也触发）
mouseout()	鼠标移除（离开子元素也触发）
mouseenter()	鼠标进入（进去子元素不触发）
mouseleave()	鼠标移除（离开子元素不触发）
hover()	同时mouseenter（移入）触发第一个函数和mouseleave（移出）触发第二个函数
resize()	游览器大小发生变化
scroll()	滚动条的位置发生变化
submit()	用户提交表单

九、ajax

1、ajax简介

ajax技术的目的时让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的元素时实例xmlhttp对象，使用此对象与后台通信，ajax通信的过程不会影响后续的javascript的实行，从而实现异步

局部更新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过游览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新

同源策略

ajax请求的页面或资源只能是同一个域下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑

2、ajax使用方法

// 使用jquery调用ajax()方法传一个字典对象
$.ajax({
    key:value
})

常用参数	描述
url	接口地址
type/method	请求方法，GET或者POST等
dataType	设置返回的数据格式，常用的是json，也可以是html，不设置会自动解析
data	请求数据，如果是json格式需要用JSON.stringify(data)处理
success	设置请求的成功后的回调函数
error	设置请求失败后的回调函数
async	设置是否异步，默认是true，表示异步
timeout	设置请求的超长时间毫秒，当async设置为false，同步的时候，timeout是不生效的
cache	默认为true（当dataType为script时，默认为false）
更多....	请移步jq在线手册

案例发送一个登录请求

// HTML页面
<form action="">
    账号: <input type="text" name="username" id="username">
    密码: <input type="password" name="username" id="password">
    <input id="dl" type="button" value="登录">
    <div class="error_msg"></div>
</form>

// 案例
// ajax请求，点击登录按钮发送
$(function () {
    $("#dl").click(function () {
        // 获取登录信息
        var username = $("#username").val();
        var pwd = $("#password").val();
        // 方式一 success ，error
        // $.ajax({
        //     url:"/login",
        //     type:"post",
        //     data:{"user":username,"pwd":pwd},
        //     dataType:"json",
        //     success:function (data) {
        //         if (data.code==="1"){
        //             alert(data.msg)
        //         }else {
        //              $(".error_msg").text(data.msg).css({color:"red",fontSize:"10px"})
        //         }
        //     },
        //     error:function () {
        //         alert("请求失败")
        //     }
        // })

        // 方式二：done fail  现在用方式二的越来越多
        $.ajax({
            url: "/login",
            method: "post",
            data: {"user": username, "pwd": pwd},
            dataType: "json"
        }).done(function (data) {
            if (data.code === "1") {
                alert(data.msg)
            } else {
             $(".error_msg").text(data.msg).css({color:"red",fontSize:"10px"})
            }
        }).fail(function () {
            alert_error_req("登录接口")
        })
    })
})

jquery ul jquery选择器 https target