jQuery&layui

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

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

jquery选择器

选择器有三种

$("p")元素选择器

$("#test") id选择器

$(".test") 类选择器

一些扩展

$("*") 选取所有元素

$(this)选取当前的元素

$("p.intro")选取class为intro的p元素

$("p:first")选取第一个p元素

$("ul li:first")选取第一个 <ul> 元素的第一个 <li> 元素

$("ul li:first-child")选取每个 <ul> 元素的第一个 <li> 元素

$("[href]")选取带有 href 属性的元素

$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素

$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素

jquery事件

$("p").click(function(){ // 动作触发后执行的代码!! }); 点击事件

dblclick()双击事件

mouseenter()鼠标指针进入

mouseleave() 鼠标指针离开

mousedown()鼠标按下

mouseup()鼠标松开

hover() 鼠标悬停

focus() 元素获得焦点

blur()元素失去焦点

jquery效果

显示和隐藏

$("p").show();

hide()隐藏

show()显示

hide和show()中参数为(speed,速度变化曲线linear,callback(){})

toggle()切换显示和隐藏

淡入和淡出

fadeIn()淡入

fadeOut()淡出

fadeToggle()切换淡入和淡出

括号中的参数为(speed,callback) speed可以为fast slow 或者ms为单位的时间

滑动

$("#panel").slideUp();

slideDown() 向下滑动展示

slideUp()向上滑动展示

slideToggle()切换滑动展示

()中的参数(speed,callback)

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

动画

$(selector ).animate({params },speed,callback);

比如

$("div").animate({ left:'250px', opacity:'0.5', height:'150px', width:'150px' });

$("div").stop()停止动画

jquery方法链

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

浏览器就不必多次查找相同的元素。

如需链接一个动作,您只需简单地把该动作追加到之前的动作上。

先会变为红色,然后向上滑动,再然后向下滑动:

jquery的html

jquery捕获

text()获取文本

html()获取富文本

val()获取输入字段的值

attr("href")获取链接中 href 属性

jquery添加元素

$("p").append("追加文本"); 在被选元素的结尾插入内容。

$("p").prepend("在开头追加文本");在被选元素的开头插入内容。

例如

function afterText(){

var txt1="<b>I </b>"; // 使用 HTML 创建元素

var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素

var txt3=document.createElement("big"); // 使用 DOM 创建元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3); // 在图片后添加文本

}

jquery删除元素

如:$("#div1").remove();

remove();删除被选元素及其子元素

empty();删除被选元素的子元素

()中可以加参数 如

$("p").remove(".italic");删除 class="italic" 的所有 <p> 元素:

jquery的css类

$("div").addClass("important blue"); 向不同的元素添加 class 属性

$("h1,h2,p").removeClass("blue");删除指定的 class 属性

$("h1,h2,p").toggleClass("blue");添加/删除类的切换操作

jquery的css方法

$("p").css("background-color");返回首个匹配元素的 background-color 值

$("p").css("background-color","yellow");为所有匹配元素设置 background-color 值

$("p").css({"background-color":"yellow","font-size":"200%"});设置多个css属性

jquery的尺寸

$("#div1").width()返回元素的宽度(不包括内边距、边框或外边距)。

$("#div1").innerWidth()方法返回元素的宽度(包括内边距)。

$("#div1").outerWidth()方法返回元素的宽度(包括内边距和边框)。

jquery遍历祖先

遍历祖先

$("span").parent();返回被选元素的父元素

$("span").parents();返回被选元素的所有祖先元素

$("span").parents("ul");返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素

$("span").parentsUntil("div");返回介于 <span> 与 <div> 元素之间的所有祖先元素

遍历后代

$("div").children();返回被选元素的所有直接子元素

$("div").children("p.1");返回类名为 "1" 的所有 <p> 元素,并且它们是 <div> 的直接子元素

$("div").find("span");返回属于 <div> 后代的所有 <span> 元素

$("div").find("*");返回 <div> 的所有后代

遍历同胞

$("h2").siblings("p");返回属于 <h2> 的同胞元素的所有 <p> 元素

$("h2").next();返回 <h2> 的下一个同胞元素

$("h2").nextAll();返回 <h2> 的所有跟随的同胞元素

$("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素:

过滤

$("div p").first();选取首个 <div> 元素内部的第一个 <p> 元素

$("div p").last();选择最后一个 <div> 元素中的最后一个 <p> 元素

$("p").eq(1);选取第二个 <p> 元素(索引号 1):

$("p").filter(".url");返回带有类名 "url" 的所有 <p> 元素

$("p").not(".url");返回不带有类名 "url" 的所有 <p> 元素

ajax

$.get

$.get("demo_test.php",function(data,status){ alert("数据: " + data + "\n状态: " + status); });

$.post

.post("/try/ajax/demo_test_post.php", { name:"菜鸟教程", url:"http://www.runoob.com" }, function(data,status){ alert("数据: \\n" + data + "\\n状态: " + status); }); ("#div1").load("demo_test.txt #p1"); 把 "demo_test.txt" 文件中 id="p1" 的元素的内容,加载到指定的 <div> 元素中

相关推荐
滑雪的企鹅.1 小时前
HTML头部元信息避坑指南大纲
前端·html
一拳不是超人1 小时前
老婆天天吵吵要买塔罗牌,我直接用 AI 2 小时写了个在线塔罗牌
前端·ai编程
excel3 小时前
如何解决 Nuxt DevTools 中关于 unstorage 包的报错
前端
Rust研习社3 小时前
使用 Axum 构建高性能异步 Web 服务
开发语言·前端·网络·后端·http·rust
C澒3 小时前
AI 生码 - API2Code:接口智能匹配与 API 自动化生码全链路设计
前端·低代码·ai编程
浔川python社3 小时前
HTML头部元信息避坑指南技术文章大纲
前端·html
IT_陈寒3 小时前
SpringBoot配置加载顺序把我坑惨了
前端·人工智能·后端
kyriewen3 小时前
Next.js部署:从本地跑得欢,到线上飞得稳
前端·react.js·next.js
Moment3 小时前
面试官:给 llm 传递上下文,有哪几个身份 role ❓❓❓
前端·后端·面试
跨境数据猎手4 小时前
跨境独立站系统技术拆解(附带源码)
服务器·前端·php