jquery常用方法

最新推荐文章于 2022-07-17 17:13:46 发布
最新推荐文章于 2022-07-17 17:13:46 发布
阅读量389 收藏 22
点赞数 3
分类专栏： web前端 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43815756/article/details/91608109
版权

最近学习jquery，整理一些常用的jquery方法
1.jquery加载

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

2.元素选择

//元素选择
$("p")

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

//class选择
$(".test")

3.点击事件

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

4.元素隐藏与显示

$("p").hide();
$("p").show(1000);
$("p").toggle();

5.元素淡入淡出

$("#div").fadeIn(3000);
$("#div").fadeOut("slow");
$("#div1").fadeTo("slow",0.15);

6.元素滑动

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

7.元素动画

$("div").animate({left:'250px'});
div.animate({left:'100px'},"slow");

8.获取内容和属性

$("#test").text()//- 设置或返回所选元素的文本内容
$("#test").html()//-设置或返回所选元素的内容（包括 HTML 标记）
$("#test").val() //- 设置或返回表单字段的值
$("#runoob").attr("href")//-获取属性值

9.添加元素

$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

10.删除元素

$("#div1").remove();//-删除被选元素及其子元素。
$("#div1").empty();//-删除被选元素的子元素。

11.操作class

$("h1,h2,p").addClass("blue");
$("h1,h2,p").removeClass("blue");
$("h1,h2,p").toggleClass("blue");

12.设置css

$("p").css({"background-color":"yellow","font-size":"200%"});

13.遍历

$("span").parent();//-返回被选元素的直接父元素
$("#span").parents();//-返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
$("div").children();//-返回被选元素的所有直接子元素
$("div").find("span");//-返回被选元素的后代元素，一路向下直到最后一个后代
$("h2").siblings();//-返回被选元素的所有同胞元素
$("h2").next();//-返回被选元素的下一个同胞元素
$("h2").nextAll();//-返回被选元素的所有跟随的同胞元素
$("h2").nextUntil("h6");//-返回介于两个给定参数之间的所有跟随的同胞元素
$("div p").first();//-返回被选元素的首个元素
$("div p").last();//-返回被选元素的最后一个元素
$("p").eq(1);//-返回被选元素中带有指定索引号的元素
$("p").filter(".url");//-不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("p").not(".url");//-返回不匹配标准的所有元素
weixin_43815756
关注
  • 3
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 常用方法
weixin_58526727的博客
07-21 1238
jQuery 常用方法 排序 eq() 方法 jQuery 中获得的对象，内部包含选择的一组原生 js 对象，在 jQuery 对象中会进行一个大的排序，这个排序与原来的 HTML 结构没有关系。 eq() 方法在 jQuery 对象中通过下标获取某个对象，下标是 jQuery 对象中的大的排序的下标。 let $ps = $('p'),$ps.eq(0).css('background-color', 'red') index() 方法 jQuery 对象调用 index() 方法时，得到的是它自
jQuery的常用方法
Java721的博客
08-18 261
jQuery操作DOM 开发工具 Hbuilder官网 jQuery下官网 新建项目并引入js文件 01-jQuery选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery选择器</title> </head> <body> <h3>jQuery选择器</h3> <div
jQuery常用方法
weixin_63896561的博客
07-17 1082
jQuery常用方法
Jquery 常用方法
qq_41995896的博客
09-17 2829
Jquery 操作函数 DOM操作属性 attr() 函数，操作元素的属性，更改属性值 <script> $("#b1").click(function () { $("#content").attr("title","content") }); </script> prop() 函数 <script> $("#b1").click(function () {
jQuery常见方法
weixin_50212969的博客
08-27 216
jQuery常用方法 jQuery入口函数 作用:等待文档中的标签加载完毕(不等待内容加载完毕),然后再执行入口函数中的代码 语法: `$(document).ready(function(){});`完整写法 `$(function(){});`简写 DOM入口函数 作用:等待文档中的标签和内容加载完毕,然后再执行入口函数中的代码 语法:`window.onload=function(){}` 区别 1.jQuery入口函数早于DOM入口函数执行 2.一个HTML文档中,最多只有一个DOM入口函数
JQuery常用方法
09-10
### JQuery 常用方法详解 #### 一、JQuery简介及使用 1. **下载地址**：JQuery官网提供最新版本的下载链接，地址为http://jquery.com/。通常，JQuery会提供两种版本供用户下载：压缩版与未压缩版。其中，压缩版...
Jquery 常用方法经典总结
10-29
### Jquery 常用方法经典总结 #### 一、页面元素的引用 在使用 jQuery 时，我们经常需要选择页面中的元素来进行操作。选择器是 jQuery 的核心特性之一，它使得开发者能够轻松地通过 id、class、元素名称以及元素...
JQuery 常用方法基础教程
10-30
JQuery 是一个流行的JavaScript库，它极大地...以上就是JQuery常用方法的基础教程，掌握这些方法能够帮助开发者高效地操作DOM，实现丰富的网页动态效果。通过不断实践和深入学习，可以更熟练地运用JQuery解决实际问题。
jquery常用方法及使用示例汇总
10-25
### jQuery常用方法及使用示例汇总 jQuery是一个快速、小巧、功能强大的JavaScript库，它封装了JavaScript常见的操作，使得Web开发者可以更方便地进行文档操作、事件处理、动画效果以及AJAX交互。下面将详细地介绍...
JQuery 常用方法和事件详细介绍
10-27
本文将详细讲解JQuery中的常用方法和事件，帮助开发者更好地理解和运用JQuery进行网页开发。 ### 文档就绪函数 在JQuery中，我们通常会使用`$(document).ready()`函数来确保所有的DOM元素都加载完毕后再执行相关的...
理解js键值对
weixin_43815756的博客
06-05 6379
之前一直对js键值对一直有点小陌生，甚至不知道js键值对中哪些是键，哪些是值;后来百度了一下,发现js键值对原来是这样理解的。 [这里是原文的出处](https://blog.csdn.net/jianleking/article/details/54603012) 举个例子 var obj=[ {"2000":{"name":"小明","age":18}} {"2001":{"...
jquery实现点击全选和取消全选
weixin_43815756的博客
07-16 1146
jQuery点击实现全选相比较js就简单很多。 <input type="checkbox" id="all"><br> <input type="checkbox" name="sub"/>1<br> <input type="checkbox" name="sub"/>2<br> <input type="check...
模拟百度搜索
weixin_43815756的博客
05-22 443
最近学习了一个百度搜索框的案例，想记录下来，下面来说说具体功能如何实现 需求： 1.当在输入框输入时，每输入一个字，就会在下方展示相关内容列表 2.每一次输入框输入，清空上一次输入内容 3.鼠标移入列表内容时，对应的内容高亮显示，移出时回复原装 4.鼠标点击内容时，将列表内容显示到文本框，清空列表 HTML页面结构和CSS样式部分代码，有点简陋。。。 <!DOCTYPE html> &...
localStorage和sessionStorage的区别
weixin_43815756的博客
06-23 368
为了等下更清楚的了解二者之间的区别，这里我们先说下localS’torage和sessionStorage是什么，首先localS’torage和sessionStorage都是用来存储客户端临时信息的对象，而且都只能储存字符串类型的对象，下面我们再来讲下二者的区别吧 1.sessionStorage用于临时存储，如果关闭浏览器后再次打开就会发先之前存入的数据已经没有了，sessionStorag...
less的用法整理
weixin_43815756的博客
07-07 365
什么是less 第一，less是单独的一种文件，可以理解为css的升级版，完全按照css写没有问题，不过它提供了很多的便利的东西，可以少写很多代码。第二，html只认识css，需要配套一些软件将less解析成css，引用的时候，直接引用css就好 嵌套 less有很多好用的地方，最常用就是它的嵌套规则，我们写css时如果元素过多，每个像 .test .content ul li{} 这样写结构就...
使用js方法动态获取地址栏参数
weixin_43815756的博客
07-14 349
最近在写移动端电商项目的时候，发现很多时候需要获取地址栏的参数，利用获取地址栏的参数来进行渲染页面数据。所以今天就写下利用js方法获取地址栏参数。 //假设这是我们要获取的地址栏参数的信息 https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=csdn 1.首先定义一个字符串存储地址栏信息 var str...
模板引擎原生写法
weixin_43815756的博客
07-09 323
最近刚接触模板引擎，发现模板引擎挺好用的，以前页面的上的数据都是通过静态渲染上去的，模板引擎可以把我们的数据动态渲染到页面上去，用起来也挺方便的，废话不多说了，直接说下模板引擎的原生写法。 模板引擎：把js数据转换成html需要的页面，这是模板引擎做的事情。 1.准备数据 2.把数据转换成html格式的字符串 ①下载原生的语法js文件 <script src="res/artTemplate...
String()对象常用的方法
weixin_43815756的博客
05-26 208
字符串常用的属性 1 .length—>返回的是字符串的长度 2 .ChartAt(索引)–>返回的是指定索引位置的字符串，如果超出索引值范围，返回空字符串 3 .concat(字符串1，字符串2)–>返回的是拼接之后的新字符串 4 .indexOf(要找的字符串，从某个位置开始找的索引)---->返回值是这个字符串的索引值，没有找到就返回-1 5 .l...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值