jQuery——常用方法

$的作用

1、$其实就是一个函数名，是jQuery的所缩写

2、$可以作为选择器，获取DOM对象对应的jQuery对象

3、$可以将一个DOM对象，转换成一个jQuery对象

4、事件中的this，指向DOM对象，所以需要使用$（this）做转换

5、什么时候使用jQuery，什么时候使用 js？其实本质上jQuery就是js，只是我们可以使用一些现成的方法而已

jQuery常用方法

1、index()；获取元素索引

2、text()；获取和设置文本节点

3、css()；获取和设置样式

4、val()；获取和设置value属性

5、attr()；获取和设置属性值，例如src

6、addClass()；添加class

7、removeClass()；删除class

8、toggleClass()；切换class

9、siblings()；获取同级其他元素

10、find("选择器")；获取子级

11、parent()；获取父级

制作页面效果

点击数字列表，切换图片

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 250px;height: 200px;}.active {background-color: red;}</style>
</head><body><img src="data:images/1.jpg" alt=""><div class="btn-list"><button>图一</button><button>图二</button><button>图三</button><button>图四</button><button>图五</button></div><script src="jquery/jquery-3.5.1.js"></script><script>// attr()方法——获取和设置属性值，例如srclet imgSrc = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg",]$('button').click(function () {// 获取索引let index = $(this).index()// 设置属性$('img').attr('src', imgSrc[index])// 设置背景色(添加class名)  使用addClass()// $(this).addClass('active')// 删除背景色(删除class名)  使用removeClass()// $(this).removeClass('active')// 切换class 使用toggleClass()// $(this).toggleClass('active')// 排他 点击按钮变色 其他按钮变回默认  使用siblings()$(this).addClass('active')$(this).siblings().removeClass('active')})</script>
</body></html>

DOM操作

1、append()；添加元素节点

2、remove()；删除元素节点

jQuery事件

1、click()

2、mouseenter()

3、mouseleave()

4、mousemove()

5、on()；事件委托

jQuery动画方法

1、show()；

2、hide()；

3、fadeln()；

4、fadeOut()；

5、slideDown()；

6、slideUp()；

7、animate()；

css3 现在几乎用这个做

练习：

1、水果列表的添加与删除

2、随鼠标显示大图

3、轮播图

jQuery——常用方法相关推荐

Jquery 常用方法经典总结
Jquery 常用方法: 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象( ...
jQuery 常用方法总结
一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...
jQuery常用方法
jQuery常用方法 val():设置或获取选中元素的value值 text():设置或获取选中元素的文本内容(会覆盖之前的文本内容) html():设置或获取选中元素的HTML内容(会覆盖之前的HT ...
Python学习 Day38 jQuery常用方法03
jQuery常用方法一.css方法概述:CSS这个方法是JQ框架给我们提供的,它主要的作用是可以设置匹配节点行内样式 CSS方法是JQ框架提供的,给匹配节点添加行内样式 JQ支持链式语法:从左到右 ...
jQuery常用方法汇总
常用方法索引: 1.JQuery自执行函数(三种) 2.text() html() val() 3.css() 4.get() 非ajax用法 5.parent() c ...
jQuery常用方法一览
Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...
前端那些事之原生js实现jquery常用方法
2019独角兽企业重金招聘Python工程师标准>>> 原生js封装,实现jquery中常用方法 //定义一个对象 - 名字是$ var $$ = function() {this ...
jQuery常用方法（二）-事件
ready(fn); $(document).ready()注意在body中没有onload事件,否则该函数不能执行.在每个页面中可以有很多个函数被加载执行,按照fn的顺序来执行. bind( ty ...
JQUERY 常用方法汇总
Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...