Jquery

最新推荐文章于 2025-06-04 15:15:11 发布

Dominic.Pan

最新推荐文章于 2025-06-04 15:15:11 发布

阅读量125

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_47183168/article/details/121800169

版权

前端专栏收录该内容

4 篇文章

订阅专栏

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
jQuery的使用

jQuery 库是一个 JavaScript 文件，可以直接在 HTML页面中通过script 标签引用它，跟引用自己的外部JavaScript脚本文件一样的语法。

<head>
<script src="jquery-1.11.1.js"></script>
</head>

jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作（actions）。

基础语法： $(selector).action()

文档就绪事件

文档就绪事件，实际就是文件加载事件。这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。所以尽可能将所有的操作都在文档加载完毕之后实现。

1
$(document).ready(function(){
// jQuery 代码...
});
2
$(function(){
// jQuery 代码...
});

jQuery的ready方法与JavaScript中的onload相似，但是也有区别：

window.onload 只能执行一次，如果执行第二次，第一次的执行会被覆盖 $(document).ready() 可执行多次，不会覆盖之前的执行 window.onload 必须等待网页全部加载完毕（包括图片等），然后再执行包裹的代码只需要等待网页中的DOM结果加载完毕就可以执行包裹的代码 $(document).ready() 可简写为$(function(){ });

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。

元素/标签选择器

$(function(){
//1、标签选择器：
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++){
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
}
});

#id 选择器

$("#p1")

class选择器

$(".mydiv")

全局选择器

$("*")匹配所有元素

并集选择器

$("div,ul,li,.mydiv")

后代选择器

$("form input")

子选择器

$("form > input")

相邻选择器

匹配所有紧接在 prev 元素后的 next 元素
$("label + input")

同辈选择器

匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")

属性选择器

匹配包含给定属性的元素
$("div[id]");//获取所有有id属性的div的元素集合
$("div[class]");//获取所有有class属性的div的元素集合
$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
$("input[id][name^='user']");

可见性选择器

匹配所有的可见或不可见的元素
$("div:visible");
$("input:hidden");

jQuery常用函数


<style>
.redBg{
background-color: red;
}
.fontColor{
color: gold;
}
</style>
<script>
//1、与内容相关的函数
function textFun(){
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内
容，包括了嵌套在内部的标签
console.log(str1);
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文
本，不包含标签的内容
console.log(str2);
var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元
素，所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素，val()可以获取到
console.log(str3);
console.log(str4);
}
//2、与属性相关的函数
function attrFun(){
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","标题");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示是否被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++){
var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
}
}
//3、与css相关的函数
function cssFun(){
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义
好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删
除，如果没有就添加
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue");
$("input").css({"color":"red","border-color":"green"});
}

function changeCss(){
$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，
如果没有就添加
}
$(function(){
cssFun();
});
</script>
</head>
<body>
<button type="button" onclick="changeCss()">切换div样式</button>
性别：<input type="radio" value="0" name="gender" checked="checked"/>女
<input type="radio" value="1" name="gender"/>男
<img src="img/a.png" title="标题" />
<div>div1<button type="button">普通按钮1</button></div>
<div>div2<button type="button">普通按钮2</button></div>
<input name="userName" value="用户名" />
<input name="password" value="123" />
</body>
</html>

jQuery中的事件

页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

常用DOM事件

<script>
//页面加载事件
$(function(){
//给所有的button绑定单击事件
$("button").click(function(){
//alert(this);//this是当前对象，哪个按钮触发的单击事件this就是那个按钮，this此时是JS对象
$(this)转换为jquery对象
$(this).css("color","red");//给当前的触发对象添加一个css
});
//给所有的超链接绑定鼠标移上事件
$("a").mouseover(function(){
var str=$(this).html();
$(this).html("鼠标移上-"+str);
});
//给所有的超链接绑定鼠标移出事件
$("a").mouseout(function(){
var str=$(this).html();
$(this).html(str.substr(5));
});
$("a").hover(function(){
$(this).css("color","red");
});
});
</script>

jQuery操作DOM

元素的增加

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

$(function(){
// append() - 在被选元素的结尾插入内容
$("#btn1").click(function(){
$("div").append("<br/>新添加的文本<br/>");
$("div").append("<p>新添加的段落</p>");
});
//prepend() - 在被选元素的开头插入内容
$("#btn2").click(function(){
$("div").prepend("<br/>新添加的文本<br/>");
$("div").prepend("<p>新添加的段落</p>");
});
//after() - 在被选元素之后插入内容
$("#btn3").click(function(){
$("div").after("<br/>新添加的文本<br/>");
$("div").after("<p>新添加的段落</p>");
});
//before() - 在被选元素之前插入内容
$("#btn4").click(function(){
$("div").before("<br/>新添加的文本<br/>");
$("div").before("<p>新添加的段落</p>");
};

元素的克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本

语法：$(selector).clone(includeEvents)；

参数：可选。布尔值。规定是否复制元素的所有事件处理。默认副本中不包含事件处理器

// clone(true)
$("#btn1").click(function(){
$("p").clone(true).appendTo("div");
});
//clone(false)
$("#btn2").click(function(){
$("p").clone(false).appendTo("div");
});

元素的替换

replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素。

replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素。

$("#btn1").click(function(){
//$("div").replaceWith("<br/>新替换的文本<br/>");
$("div").replaceWith("<p>新替换的段落</p>");//所有的div被后面的
参数替换掉
$("<div>新的div</div>").replaceAll("p");//用前面的内容替换掉所有
的段落p
}
});

元素的删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

//remove() - 删除被选元素（及其子元素）
$("#btn1").click(function(){
$("div").remove();//所有的div元素及其子元素被删除
});
//remove(筛选条件) - 删除符合筛选条件的元素
$("#btn2").click(function(){
$("div").remove(".test");//所有的div元素中引用了class="test"的
div被删除
});
//empty() - 从被选元素中删除子元素
$("#btn3").click(function(){
$("div").empty();//删除div中的所有子元素
});

jQuery效果

隐藏和显示语法：
$(selector).hide([speed,callback]);
$(selector).show([speed,callback]);
$(selector).toggle([speed,callback]);
参数说明：
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

$("#btnHide").click(function(){
//$("div").hide();
//$("div").hide(2000);
$("div").hide(2000,function(){
alert("隐藏完成！");
});
});
$("#btnShow").click(function(){
//$("div").show();
//$("div").show(2000);
$("div").show(2000,function(){
alert("显示完成！");
});
});
$("#btnToggle").click(function(){
//$("p").toggle();
//$("p").toggle(2000);
$("p").toggle(2000,function(){
alert("切换完成！");
});
});
});

淡入和淡出