jquery基础入门

标签：not   syn   需要   停止   top   效果   com   jquery事件   sync   

一、jquery介绍和引用

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

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

• 官网网站 : https://jquery.com
• 在线手册：https://jquery.cuishifeng.cn/
• 下载：http://code.jquery.com/

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

二、jquery选择器

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

1、jquery基本的选择器

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

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

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

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

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

2、选择同胞和父辈元素

div1
div2

    
行元素
    

学校
        
曹彰
        
操场
        
班级
        
学生
    

div4

// 选择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方法获取

div1
div2


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

三、jquery操作样式

1、获取元素样式

div1

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

2、修改样式

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

3、添加或移除class属性

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

div4
动态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操作属性

// 案例
// HTML

显示姓名

// 点击按钮的时候，获取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元素

    获取内容1
    获取内容2
    获取内容3
    获取内容4


// 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+"新添加的"即可
// 一般添加html我们也不适用这个方法使用下面将说到的四个方法来添加html内容
// 所以我们用的更多时获取

// val()方法
// HTML

显示姓名

// 点击按钮时获取输入框的内容
$(".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内容

3、删除元素/内容

// 案例
// HTMl元素

1111111111
    
22222222222
    
333333333

结尾追加
开始追加
之后最佳
之前追加
删除元素
删除子元素

// append()：末尾添加子元素
$(".b_4").click(function () {
    $("ol").append("
追加内容
")
});

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

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

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

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

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

七、jquery效果函数

八、jquery事件

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

九、ajax

1、ajax简介

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

局部更新和无刷新

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

同源策略

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

2、ajax使用方法

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

案例发送一个登录请求

// HTML页面

    账号: 
    密码: 



// 案例
// 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基础入门

标签：not   syn   需要   停止   top   效果   com   jquery事件   sync   

原文地址：https://www.cnblogs.com/jiangmingbai/p/13040815.html