jQuery 知识点

最新推荐文章于 2022-09-26 20:54:03 发布

如果我来了6

最新推荐文章于 2022-09-26 20:54:03 发布

阅读量451

点赞数 2

分类专栏：前端文章标签： jquery javascript html

本文链接：https://blog.csdn.net/qq_29821795/article/details/119974974

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

jQuery

jQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程

一、使用方式

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 < script> 标签引用它

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

从 CDN 中载入 jQuery

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>

二、选择器

1.元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素

$(“p”) 选取

元素

$(“p.intro”) 选取所有 class=“intro” 的 < p> 元素

$(“p#demo”) 选取所有 id=“demo” 的 < p> 元素

2.属性选择器

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

$("[href=’#’]") 选取所有带有 href 值等于 “#” 的元素

$("[href!=’#’]") 选取所有带有 href 值不等于 “#” 的元素

$(" [h r e f$ =’.jpg’]") 选取所有 href 值以 “.jpg” 结尾的元素

选择器实例

语法	描述
$(this)	当前 HTML 元素
$(“p”)	所有 < p> 元素
$(“p.intro”)	所有 class=“intro” 的 < p> 元素
$(".intro")	所有 class=“intro” 的元素
$("#intro")	id=“intro” 的元素
$(“ul li:first”)	每个 < ul> 的第一个 < li> 元素
$(" [h r e f$ =’.jpg’]")	所有带有以 “.jpg” 结尾的属性值的 href 属性
$(“div#intro .head”)	id=“intro” 的 < div> 元素中的所有 class=“head” 的元素

三、事件

页面对不同访问者的响应叫做事件

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

页面中指定一个点击事件：

$("p").click(function(){
	alert('点击了')
});

常用的 jQuery 事件方法

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload
hover

四、效果

1. 显示隐藏

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

$("button").click(function(){
  $("p").hide();
});

$("button").click(function(){
  $("p").show();
});

语法：

//speed  规定隐藏/显示的速度
//callback  隐藏或显示完成后所执行的函数

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

toggle()

可以使用 toggle() 方法来切换 hide() 和 show() 方法

$("button").click(function(){
  $("p").toggle();
});
// 语法
// $(selector).toggle(speed,callback);

2.淡入淡出

通过 fade ，可以实现元素的淡入淡出效果。

四种 fade 方法，都可接收2个参数：

speed 规定效果的时长
callback 完成后所执行的函数

fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切换
fadeTo() 渐变

fadeIn()

fadeIn() 用于淡入已隐藏的元素。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div3").fadeIn(3000);
});

fadeOut()

fadeOut() 方法用于淡出可见元素

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div3").fadeOut(3000);
});

fadeToggle()

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div3").fadeOut(3000);
});

fadeTo()

fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

$("button").click(function(){
  $("#div3").fadeTo(3000,0.3);
  $("#div3").fadeTo(3000,0.5);
  $("#div3").fadeTo(3000,0.7);
});

3.滑动

jQuery 拥有以下滑动方法：

都可接收2个参数：

speed 规定效果的时长
callback 完成后所执行的函数

slideDown()
slideUp()
slideToggle()

slideDown()

slideDown() 方法用于向下滑动元素

$("button").click(function(){
  $("#divl").slideDown();
});

slideUp()

slideUp() 方法用于向下滑动元素

$("button").click(function(){
  $("#divl").slideUp();
});

slideToggle()

slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

如果元素向下滑动，则 slideToggle() 可向上滑动它们

如果元素向上滑动，则 slideToggle() 可向下滑动它们

$("button").click(function(){
  $("#divl").slideToggle();
});

4.动画

animate() 方法用于创建自定义动画

默认所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute

基础使用：

//必需的 params 参数定义形成动画的 CSS 属性。

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

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

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

$("button").click(function(){
  $("div").animate({left:'250px'});
});

操作多个属性：

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

nimate() 方法来操作大部分 CSS 属性。当使用 animate() 时，必须使用驼峰写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right。

使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

使用预定义的值

以把属性的动画值设置为 “show”、“hide” 或 “toggle”

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

使用队列

jQuery 提供针对动画的队列功能。

如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

5.停止动画

stop() 方法用于停止还在执行的动画或效果

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

//$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
  $("#panel").stop();
});

五、DOM操作

1.获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

text() 和 html() 方法来获得内容

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

val() 方法获得输入字段的值：

$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});

2.设置内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Hello world");
});

3.获取属性

attr() 方法用于获取属性值

$("button").click(function(){
  alert($("a").attr("href"));
});

4.设置属性

attr() 方法也用于设置/改变属性值

$("button").click(function(){
  $("a").attr("href","https://www.baidu.com/");
});

//设置多个属性
$("button").click(function(){
  $("a").attr({
      href :"https://www.baidu.com/",
      title : "百度"
  });
});

5.添加元素

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

4个方法均可接收多个参数

append()

append() 方法在被选元素的结尾插入内容

$("p").append("我是使用append插入的内容");

prepend()

prepend() 方法在被选元素的开头插入内容

$("p").prepend("我是使用prepend插入的内容");

after()

after() 方法在被选元素之后插入内容

$("p").after("我是使用after插入的内容");

before()

before() 方法在被选元素之前插入内容

$("p").before("我是使用before插入的内容");

6.删除

如需删除元素和内容，一般可使用以下两个 jQuery 方法：

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

remove()

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

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

empty()

empty() 方法删除被选元素的子元素

$("#div1").empty();
//$('#div1').html('')

过滤被删除的元素

remove() 方法也可接受一个参数，允许对被删元素进行过滤

$("p").remove(".text");

7.操作css类

进行 CSS 操作的方法：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

addClass()

向不同的元素添加 class 属性

$("button").click(function(){
    // list red
  $("h1,h2,p").addClass("red");
  $("div").addClass("box");
});

也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("#div1").addClass("box blue");
});

removeClass()

删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("red");
});

toggleClass()

对被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("red");
});

css()

css() 方法设置或返回被选元素的一个或多个样式属性

//获取样式
$("p").css();
//设置背景颜色
$("p").css("background-color");

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

尺寸

jQuery 提供多个处理尺寸的方法：

width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()

width() height()

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

$("button").click(function(){
    console.log($("#div1").width())
    console.log($("#div1").height())
});

innerWidth() innerHeight()

innerWidth() 方法返回元素的宽度（包括内边距）

innerHeight() 方法返回元素的高度（包括内边距）

$("button").click(function(){
    console.log($("#div1").innerWidth())
    console.log($("#div1").innerHeight())
});

outerWidth() outerHeight()

outerWidth() 方法返回元素的宽度（包括内边距和边框）

outerHeight() 方法返回元素的高度（包括内边距和边框）

$("button").click(function(){
    console.log($("#div1").outerWidth())
    console.log($("#div1").outerHeight())
});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

$("button").click(function(){
    console.log($("#div1").outerWidth(true))
    console.log($("#div1").outerHeight(true))
});

指定元素宽度高度

$("button").click(function(){
  $("#div1").width(500).height(500);
});

六、遍历

1.向上遍历 DOM 树

用于向上遍历 DOM 树：

parent()
parents()
parentsUntil()

parent()

parent() 方法返回被选元素的直接父元素。

该方法只会向上一级对 DOM 树进行遍历

$("span").parent().css({"color":"red","border":"2px solid red"}

parents()

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (< html>)

$("span").parents().css({"color":"red","border":"2px solid red"}

parentsUntil

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

2.向下遍历 DOM 树

用于向下遍历 DOM 树的 jQuery 方法：

children()
find()

children()

children() 方法返回被选元素的所有直接子元素

 $("div").children().css({"color":"red","border":"2px solid red"});
//过滤对子元素
 $("div").children("p.1").css({"color":"red","border":"2px solid red"});

find()

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代

//只选中span
$("div").find("span").css({"color":"red","border":"2px solid red"});
//选中所有
$("div").find("*").css({"color":"red","border":"2px solid red"});

3.DOM 树中水平遍历

在 DOM 树进行水平遍历：

siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

siblings()

siblings() 方法返回被选元素的所有同胞元素

$("h2").siblings().css({"color":"red","border":"2px solid red"});
// <h2> 的同胞元素的所有 <p> 元素
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});

next()

next() 方法返回被选元素的下一个同胞元素

 $("h2").next().css({"color":"red","border":"2px solid red"});

nextAll()

nextAll() 方法返回被选元素的所有跟随的同胞元素

$("h2").nextAll().css({"color":"red","border":"2px solid red"});

nextUntil()

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素

 $("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

prev()

prev() 获得匹配元素集合中每个元素紧邻的前一个同胞元素

prevAll()

prevAll() 获得当前匹配元素集合中每个元素的前面的同胞元素

prevUntil()

prevUntil() 方法获得当前匹配元素集合中每个元素的前面的同胞元素

4.过滤

过滤允许基于其在一组元素中的位置来选择一个特定的元素:

first()
last()
eq()
filter()
not()

first()

first() 方法返回被选元素的首个元素

$("div p").first().css("background-color","yellow")

last()

last() 方法返回被选元素的最后一个元素

$("div p").last().css("background-color","yellow")

eq()

eq() 方法返回被选元素中带有指定索引号的元素

$("p").eq(1).css("background-color","yellow")

filter()

filter() 方法允许您规定一个标准,匹配的元素会被返回

$("p").filter(".info").css("background-color","yellow")

not()

not() 方法返回不匹配标准的所有元素

$("p").not(".info").css("background-color","yellow")

七、AJAX

AJAX 是与服务器交换数据的方法，它在不重载全部页面的情况下，实现了对部分网页的更新

通过 jQuery AJAX 方法，可以使用 HTTP的 get 和 post方法，从远程服务器上请求文本、HTML、XML 或 JSON 同时还能够把这些外部数据直接载入网页的被选元素中

load()

语法：

$(selector).load(URL,data,callback);

URL 参数规定加载的 URL 必选

**data **参数规定与请求一同发送的查询字符串键/值对集合可选

callback 参数是 load() 方法完成后所执行的函数名称可选

load() 方法从服务器加载数据，并把返回的数据放入被选元素中

 $("#btn1").click(function(){
 $('#test').load('https://www.fastmock.site/mock/323354e56ef21147c3f550e18435baa1/api/get/myCourse',data,function(){});
  })

get()

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

//$.get(URL,callback);
 $("button").click(function(){
  $.get('https://www.fastmock.site/mock/323354e56ef21147c3f550e18435baa1/api/get/myCourse',function(data,status){
      console.log(data);
      console.log(status);
    });
  });

post()

$.post() 方法通过 HTTP POST 请求从服务器上请求数据

//$.post(URL,data,callback);

$.post("/example/jquery/demo_test_post.asp",
    {
      page:1,
      name:"Tina"
    },
    function(data,status){
      console.log(data);
      console.log(status);
    });

八、在线文档

https://jquery.cuishifeng.cn/

如果我来了6

关注

2
点赞
踩
5

收藏

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

jQueryjQuery 是一个 JavaScript 库，极大地简化了 JavaScript 编程一、使用方式jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 < script> 标签引用它<head><script src="jquery-1.10.2.min.js"></script></head>从 CDN 中载入 jQuery<script src="https://apps.bdimg.
复制链接

扫一扫

专栏目录