jQuery基础

最新推荐文章于 2023-06-11 13:49:24 发布

Dawn~cl

最新推荐文章于 2023-06-11 13:49:24 发布

阅读量102

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/Dawn_cl/article/details/109098320

版权

这篇笔记详细介绍了JQuery的基本使用，包括其作为JavaScript库的作用、引入方式（CDN）、选择器（如标签、类、ID选择器及更复杂的选择器）、DOM元素的操作（获取内容、添加属性、CSS操作）以及事件处理。还涵盖了添加、删除和切换class，元素的显示与隐藏、淡入淡出、滑动效果，以及元素的动画、添加和删除等DOM操作。此外，还讲解了遍历元素的方法，如父母、子级、兄弟元素的选择。

摘要由CSDN通过智能技术生成

JQuery笔记

一、什么是JQuery？为什么用JQuery？

jq是js的代码库，jq让我们写的更少、做的工作更多

二、jq使用方法:

<head>
    <!-- 引入jq文件 -->
    <script src="jquery-3.4.1.min.js"></script>
</head>

三、什么是CDN

cdn是内容分发网络，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
百度CDN:

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

Google CDN:

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
</head>

四、jq选择器的使用

标签选择器:
class选择器:
id选择器:
jq选择器功能异常强大，css拥有的选择器，jq都能用
例: 层次选择器、结构为类选择器、属性选择器

$(“li:nth-child(2)”).text(); ---->获取页面中第二个li标签内容

五、jq获取DOM元素

获取标签内容:

获取纯文本: text()
获取纯文本和HTML标记: html()
获取表单内容: val();
获取标签属性: attr();
获取标签样式: $(“div”).css(“width”);

向标签中添加内容:

向标签内添加内容:

添加纯文本内容:

$(“p”).text(“我是新增”);

添加文本和HTML标记:

(“p”).html(“我是新增”);

向表单中添加内容

$(".user").val("…");

给标签添加属性:

$(“img”).attr(“title”,“哈哈”);

给标签添加css样式:

添加一个css样式:

$(“p”).css(“color”,“red”);

添加多个css样式:

$(“p”).css({“background-color”:“green”,“font-size”:“50px”});

六、jq事件

点击事件用法:

$("input").click(function(){
	alert('我被触发了');
});

事件传递this:

$("ul li").click(function(){
	console.log($(this).text());
});

七、jq操作DOM元素

1.jq添加、删除、切换class

添加:

$(“p”).addClass(“bcg”);

删除:

$(“p”).removeClass(“bcg”);

切换:

$(“p”).toggleClass(“bcg”);

2.元素隐藏与显示

元素显示:

$(“p”).show();

元素隐藏:

$(“p”).hide();

切换元素显示和隐藏状态:

$(“p”).toggle();

上述三个方法其实有两个默认参数:
- speed: 方法执行的速度
- callback: 方法经过speed毫秒后，要执行的方法名(只写方法名不写括号)

3.元素的淡入和淡出 : 操作的是css中 opacity属性，取值范围是0~1之间

元素的淡入:

$(“p”).fadeIn(); 元素透明度从0–>1

元素的淡出:

$(“p”).fadeOut(); 元素透明度从1–>0

元素切换淡入淡出状态:

$(“p”).fadeToggle();切换元素透明度

元素从初始状态渐变为自定义的透明度:

$(“p”).fadeTo(3000,0.5);

上述四个方法其实还有两个默认参数:speed,callback，用法同隐藏与显示

4.元素的滑动:

元素向上滑动:

$(“p”).slideUp();

元素向下滑动:

$(“p”).slideDown();

元素切换上下滑动:

$(“p”).slideToggle();

上述四个方法其实还有两个默认参数:speed,callback，用法同隐藏与显示

5.元素动画:

开始动画:

$(“p”).animate({“width”:”10px”},speed,callback)

停止动画:

$(“p”).stop();

6.添加元素:

创建节点:

var p = $("<p>我是创建的p标签</p>");

将B插入到A中:

$(A).append(B);

将A插入到B中:

$(A).appendTo(B);

将B插入到A中并且在最前面，B是A的子元素:

$(A).prepend(B);

将A插入到B中并且在最前面，A是B的子元素:

$(A).prependTo(B);

将B插入到A前面，AB同级:

$(A).before(B);

将B插入到A后面，AB同级:

$(A).after(B);

7.删除元素:

删除包括自己的所有元素:

$(“div”).remove();

只删除子级元素:

$(“div”).empty();

八、遍历jq元素

1.父级:

获取所有父级:

$(“li”).parents();

获取直接父级:

$(“li”).parent();

获取所有父级中带有特征的元素:

$(“li”).parents(“选择器”);

2.子级

获取直接子级:

$(“div”).children();

获取所有子级:

$(“div”).find(“*”);

获取直接子级中带有特征的元素:

$(“div”).children(“选择器”);

获取所有子级中带有特征的元素:

$(“div”).find(“选择器”);

3.兄弟

获取所有兄弟:

$(“li”).siblings();

获取带有特征的所有兄弟:

$(“li”).siblings(“选择器”);

获取下一个兄弟:

$(“li”).next();

获取下面所有兄弟:

$(“li”).nextAll();

获取下面所有带有特征的兄弟:

$(“li”).nextAll(“选择器”);

4.eq:按索引获取元素:

$(“li”).eq(index); index从0开始

Dawn~cl

关注

0
点赞
踩
0

收藏

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

JQuery笔记一、什么是JQuery？为什么用JQuery？jq是js的代码库，jq让我们写的更少、做的工作更多二、jq使用方法:<head>  <script src="jquery-3.4.1.min.js"></script></head>三、什么是CDNcdn是内容分发网络，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。百度CDN:<head
复制链接

扫一扫