jQuery的使用

chy1984

已于 2022-11-20 04:30:59 修改

阅读量814

点赞数

分类专栏： JavaScript 文章标签： jquery

于 2020-05-18 12:08:56 首次发布

本文链接：https://blog.csdn.net/chy_18883701161/article/details/106178990

版权

JavaScript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

引入

//src推荐使用cdn文件，以提高加载速度
<script src="js/jquery-3.5.1.js"></script>

//jq之类的基础类库，引入时尽量其它js脚本之前，以保证后续的js脚本中可以使用这些类库
//如果引入jq的位置比较靠后，则尽量把js代码放在文档就绪函数中，以保证执行js脚本时能获取到相关元素
$(document).ready(function(){

});

//某些网站未引入jq，可以在console执行以下代码，来引入jq
var jquery = document.createElement('script');  
jquery.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(jquery);

//可能要等1、2秒等jq脚本加载完毕，后续就可以执行jq写的代码了

语法

$(selector).action()

如果$和其它库冲突，换为关键字jQuery
选择器使用的是css选择器。如果写在html元素中，可以使用this表示当前元素，$(this).xxx()

事件监听

// 可以写匿名函数
$("#btn").click(function(){
    console.log("msg");
}) 


function f(){
    alert("msg");
}

// 也可以写函数名，注意函数名后面不能带()，带()是直接调用，只在页面加载时执行1次
$("#btn").click(f);

js的事件带on，jq的事件就是js事件去掉on。$(选择器).事件(处理函数)

特效

// 显示、隐藏
$("#app").show();  //显示
$("#app").hide();  //隐藏
$("#app").toggle();  //切换。如果已隐藏则显示，如果已显示则隐藏


// jq特效均可指定完成速度|时间，后续不再说明
$("#app").show("slow");  //slow、fast
$("#app").show(1000);  //ms


// 淡入、淡出
$("#app").fadeIn();  //淡入
$("#app").fadeout();  //淡出
$("#app").fadeToggle();  //切换，如果已淡入则淡出，如果已淡出则淡入

$("#app").fadeTo("slow",0.5);  //渐变到指定透明度。速度|时间，目标透明度


// 滑动，效果类似于戏剧幕布的上拉、放下
$("#app").slideDown();  //向下滑
$("#app").slideUp();  //向上滑
$("#app").slideToggle();  //切换


// 动画，原样式=>目标样式这形成了动画
$("#app").animate({
    left:'250px',  //如果要移动元素，position不能是static
    opacity:'0.5',
    height:'150px',  //使用绝对值
    width:'+=150px'  //使用相对值，相对于原值
},"slow"); //第一个参数是对象，指定目标css样式，第二个参数可选，指定速度|时间

// 动画队列，可以给一个元素设置多个动画，这些动画会依次执行
$("#app").animate(...);
$("#app").animate(...);
$("#app").animate(...);


/*
 停止该元素的jq特效，2个可选参数：
 stopAll 是否停止该元素jq特效队列中所有的特效，缺省时默认false，只停止当前jq特效
 goToEnd 是否直接（瞬时）完成特效，直接显示结果效果，缺省默认false，停止在当前效果
*/
$("#app").stop();
$("#app").stop(false,false);

操作html元素

// 获取
$("#app").text()  //获取inneText
$("#app").html()  //获取innerHTML
$("#app").val()  //获取表单元素的值
$("#app").attr("name")  //获取属性值


// 设置
$("#app").text("Hello");
$("#app").html("<b>Hello</b>")
$("#app").val("hello")
$("#app").attr("name","comment")  //属性名，属性值


// 添加内容，内容可以是text，也可以html文本
$("#app").append("<h4>hello</h4>")  //在内部中末尾处插入，比如ul插入一个li
$("#app").prepend("<h4>hello</h4>")  //在内部中开头处插入
$("#app").after("<h4>hello</h4>")  //以伪元素的形式在元素之后插入
$("#app").before("<h4>hello</h4>")  //以伪元素的形式在元素之前插入

// 可同时添加多个内容，逗号隔开即可
$("#app").append("<h4>hello</h4>","<p>......</p>")


// 删除元素
$("div").remove();  //删除选中的所有元素（及其子元素）
$("div").remove(".italic");  //只删除选中的元素中的指定元素，参数是选择器，对选中的元素进行过滤
$("div").empty()  //清空被选中的元素，删除所有子元素、保留元素本身

操作元素的css样式

// class
$("div").addClass("important")  
$("div").removeClass("important") 
$("div").toggleClass("important")  //切换，如果已添加则移出，如果已移出则添加

$("div").addClass("important blue")  // 均可同时操作多个css类，空格分开即可
$("h3,p").addClass("blue")  //分组选择器


//获取、设置具体的css属性
$("div").css("background-color")
$("div").css("background-color","yellow")
$("div").css({"background-color":"yellow","width":"200px"})  //同时设置多个css属性，写成对象形式


// 获取、设置元素的宽高。使用的是标准盒子模型，宽高均指content的宽高
$("#div").width() 
$("#div").width("200px")
$("#div").height() 
$("#div").height("200px")

css()、width()、height()设置的都是行内样式

获取亲属元素

// 向上遍历，祖先
$("#div").parent()  //获取直接父元素

$("#div").parents()  //获取所有的祖先元素，一直到根元素<html>

// 参数是选择器
$("#p").parents("div")  //只获取祖先元素中的<div>元素，参数对结果进行过滤
$("p").parentsUntil("div")  //向上获取祖先元素，但只到<div>一级（含）


// 向下遍历，子孙
$("div").children()  //获取所有的直接子元素
$("div").find("*")  //获取所有的子孙元素

// 可对结果进行过滤，参数是选择器
$("div").children("p.red")  //只获取直接子元素中引用了red类的p元素
$("div").find("span")  //只获取子孙元素中所有的span元素


// 同级遍历，同胞
$("div").siblings()  //获取所有的兄弟元素

$("div").next()  //下一个兄弟元素
$("div").nextAll()  //之后所有的兄弟元素
$("div").nextUntil("#app")  //直到指定的元素（不含），参数是选择器

$("div").prev()  //前一个兄弟元素
$("div").prevAll()  
$("div").prevUntil("#app")


//对元素集合进行过滤
$("div").first()  //获取集合中的第一个元素
$("div").last()  //最后一个
$("div").eq(2)  //第三个，下标

$("div").filter(".red")  //所有引用了red类的元素
$("div").not(".red")  //所有没有引用red类的元素

遍历

$(“xxx”).each(xxx函数) 用于遍历元素集合

$.each(数组|对象, xxx函数) 用于遍历数组、对象

遍历元素集合

$("li").each(function(){
	alert($(this).text());
});

注意：箭头函数不会改变this的指向，此处用箭头函数写容易出错，尽量用匿名函数写。

遍历数组、对象

//遍历数组
let arr=['张三', '李四'];
$.each(arr, (index,value) => {
	alert(index + '：' + value);
});


//遍历对象
let user = {
	"name": "chy",
	"age": 20
};
$.each(user, (key,value) => {
	alert( key + ": " + value );
});

链式写法

jq支持链式写法，会依次执行

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

ajax

AJAX：Asynchronous JavaScript and XML 异步JavaScript 和 XML。

不重载整个网页即可从后台获取数据，数据格式支持文本、html、xml、json。

// $.ajax()
$.ajax({
 url:"../xxx/xxx",  //../表示项目根目录。如果是请求.txt等文件，直接写路径即可
 type:"post",
 data:{"no":$("#no").val(),"name":$("#name").val()}, //要携带的数据，写成对象形式
 dataType:"json",  //期待返回的数据类型,常用的比如xml、html、text、script、json
 error:function () {
     //...
 }, 
 success: function (data) {  //参数表示后台返回的数据
     //...
 }
})


// $.get()
$.get({
 url:"../xxx/xxx", 
 data:{"no":$("#no").val(),"name":$("#name").val()},
 dataType:"json",
 error: error => {
     //...
 }, 
 success: data => {  
     //...
 }
})


// $.post()的用法和$.get()的相同