jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

Venus枯草

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量95

点赞数 1

分类专栏： Java学习记录文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44696477/article/details/119177314

版权

Java学习记录专栏收录该内容

30 篇文章 2 订阅

订阅专栏

简介

jQuery是一个JavaScript函数库
包含以下功能：
HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
在html中通过script标签引用

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

语法结构

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

基础语法

$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件
文档完全加载后再使用 jQuery

$(function(){
// 开始写 jQuery 代码...
});

jQuery选择器

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

元素选择器

语法：$(“标签名称”)


<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//文档就绪事件：
$(document).ready(function(){
//编写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]));
}
});
</script>

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”);

常用事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KXJUXyFr-1627449729152)(en-resource://database/1233:0)]

jQuery操作DOM

元素增加

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

元素克隆

clone(boolean)-克隆匹配的DOM元素并且选中这些克隆的副本
语法：$(selector).clone(includeEvents)；
参数：可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

元素替换

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

元素删除

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

jQuery效果

隐藏和显示

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

淡入和淡出

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

Venus枯草

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

简介jQuery是一个JavaScript函数库包含以下功能：HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities在html中通过script标签引用<head><script src="jquery-1.11.1.js"></script></head>语法结构jQuery 语法是通过选取 HTML 元素，并对选取的元素
复制链接

扫一扫