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("登录接口")
        })
    })
})

相关推荐

Web全栈笔记 / 0评论 2020-06-15