jQuery基本操作

最新推荐文章于 2022-02-18 20:14:10 发布

蜡笔小连

最新推荐文章于 2022-02-18 20:14:10 发布

阅读量95

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/jyyqxrm/article/details/120220907

版权

1.基本语法及功能使用

jQuery是一个快速小巧、功能丰富的第三方JavaScript库
功能：
选取HTML元素
操作HTML元素
CSS操作
操作HTML事件
…

使用：
bootcdn…上找到资源，把链接引入到HTML文件里
1.直接引入网络资源
2.将网络资源下载到本地去引入
通过jQuary或者$去调用相应的属性和方法

基础语法：$(selector).action()
美元符号定义 jQuery
选择符（selector）“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

文档就绪函数
$(document).ready(function(){});防止文档没有加载完就运行jQuery代码
$(function(){});匿名函数会在文档加载完后执行

jQuery选择器
通过选择器选择符合条件的元素，将其保存为jQuary对象

$("*")、$("div")、$(".app")、$("[]")、$("p").css("background-color","red"); ...

jQuery事件
事件：click、dblclick、mouseenter、mouseleave、hover、keypress、keydown ...
事件具体含义见 https://blog.csdn.net/JYYQXRM/article/details/120208083
例如：$("div").click(function{});

2.效果

以下参数均为两个可选参数：
speed表示效果的速度：数字类型(毫秒)，string类型(slow/fast)
callback表示效果完成后所执行的函数名称

显示/隐藏效果
隐藏：$(selector).hide(speed,callback);
显示：$(selector).show(speed,callback);
隐藏显示之间切换：$(selector).toggle(speed，callback)

$("button1").click(function(){
  $("p").hide(1000);
});//点击button1隐藏p元素
$("button2").click(function(){
  $("div").toggle(fast);
});//点击button2显示div

淡入淡出效果
淡入：fadeIn(speed，callback);
淡出：fadeOut(speed，callback);
淡入淡出之间切换：fadeToggle(speed，callback);

滑动
向下滑动元素：slideUp(speed，callback);
向上滑动元素：slideDown(speed，callback);
两者之间切换：slideToggle(speed，callback);

3.操作dom节点

获取节点
第一步：通过$(选择器)获取要操作的dom节点

获取内容
.text();设置或返回所选元素的文本内容
.html();设置或返回所选元素的内容（包括 HTML 标记）
.val(); 返回表单的字段
.attr(); 获取属性值，例如可以获取a标签中的href属性的值
实例：

$("#btn1").click(function(){
  alert($("#test").text());
});//这是段落中的粗体文本。
$("#btn2").click(function(){
  alert($("#test").html());
});//这是段落中的<b>粗体</b>文本。

<body>
	<p id="test">这是段落中的<b>粗体</b>文本。</p>
</body>

设置内容
方法同获取内容，只需要将()里设置为要修改的新内容

回调函数
前面三种方法都拥有回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，原始(旧的)值
.text(function(i,origText){}

添加
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
只需要在()中添加输入要添加的html内容即可

删除
remove() 删除被选元素（及其子元素）
可以接受一个参数，用于对被删元素进行过滤。

$("p").remove(".app"); //删除类名为app的所有p元素

empty() 从被选元素中删除子元素

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

<!--添加css类实例，其它方法类似-->
<!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>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        .important{
            font-weight:bold;
            font-size: 50px;
        }
        .blue{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>标题 1</h1>
	<h2>标题 2</h2>
	<p>这是一个段落。</p>
	<p>这是另一个段落。</p>
	<div>这是非常重要的文本！</div>
    <br>
    <button>向元素添加类</button>
</body>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("h1,h2,p").addClass("blue");
            $("div").addClass("important");
        });
    });
    </script>
</html>

css()方法
css() 方法设置或返回被选元素的一个或多个样式属性。
返回指定的 css 属性的值：css("propertyname");
设置指定的 css 属性：css("propertyname","value");
设置多个 css 属性：css({"propertyname":"value","propertyname":"value",...});
实例：

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

蜡笔小连

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本操作

1.基本语法及功能使用jQuery是一个快速小巧、功能丰富的第三方JavaScript库功能：选取HTML元素操作HTML元素CSS操作操作HTML事件…使用：bootcdn…上找到资源，把链接引入到HTML文件里1.直接引入网络资源2.将网络资源下载到本地去引入通过jQuary或者$去调用相应的属性和方法基础语法：$(selector).action()美元符号定义 jQuery选择符（selector）“查询”和“查找” HTML 元素jQuery 的 action()
复制链接

扫一扫