jQuery学习01

时间：2020-11-20 12:03:34 收藏：0 阅读：18

jQuery学习

jQuery学习
id选择器

1.什么是jQuery?

jQuery是一个轻量级的JavaScript函数库

特征：”写的少，做的多“

2.jQuery功能

HTML元素选取
HTML元素操作
CSS操作
HTML事件函数
JavaScript特效和动画
HTML DOM遍历和修改
AJAX
Utilities
还有大量插件

3.为什么使用jQuery?

jQuery是目前最流行的JS框架，而且提供了大量的扩展

4.如何使用？

1.jQuery安装

可以在本地下载后引入jquery，也可以采用cdn的方式，比如说：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

在控制台上可以使用$.fn.jquery命令查询你使用jquery版本

技术图片

2.jQuery语法

基础语法：

$(selector).action()

$符号代表jQuery，

selector是选择符，实际值为要查询或者查找的HTML元素，比如”h1“,"p"，再补充一个this,

action()表示对元素进行的操作，比如说hide()隐藏,show()显示

$("h1").hide("fast");

这句话的意思是隐藏标签为

的元素，参数为“fast”,快速隐藏，补充：有的操作是可以添加参数的，具体使用什么参数请查看文档。

3.jQuery选择器

元素选择器
id选择器

.class选择器

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>.class选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        $(document).ready(function (){
            // $("button").click(function (){
            //     $("p").hide();
            // })
            $("#demo").click(function (){
                $("#demo").hide();
            })
            $("button").click(function (){
                $(".test").hide();
            })
        })
    </script>
</head>
<body>
<h1>我是一个标题</h1>
<p>这是一个段落</p>
<p id="demo">id为demo的段落</p>
<p class="test">class为test的段落</p>
<button>按钮</button>
</body>
</html>

更多实例：

元素元素

$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的元素	在线实例
$("p:first")	选取第一个元素	在线实例
$("ul li:first")	选取第一个元素的第一个元素	在线实例
$("ul li:first-child")	选取每个元素的第一个元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target=‘_blank‘]")	选取所有 target 属性值等于 "_blank" 的元素	在线实例
$("a[target!=‘_blank‘]")	选取所有 target 属性值不等于 "_blank" 的元素	在线实例
$(":button")	选取所有 type="button" 的元素和	在线实例
$("tr:even")	选取偶数位置的
在线实例
$("tr:odd")	选取奇数位置的
在线实例

4.jQuery事件

在元素在移动鼠标

选取单选按钮

点击元素

常见的DOM事件

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress（键按下）	submit	load
dblclick（双击）	keydown（键按下的过程）	change	resize（浏览器窗口调整大小）
mouseenter（鼠标进入）	keyup（键被松开）	focus（获得焦点）	scroll（滚动）
mouseleave（鼠标离开）		blur（失去焦点）	unload（离开页面）
hover（鼠标悬停再被选元素上时）			ready（当DOM准备就绪时，指定一个函数来执行）
			holdReady 暂停或恢复ready()事件的执行

5.jQuery效果

hide() 隐藏

show()显示

toggle()相当于切换显示隐藏和显示

fadeIn()淡入

fadeOut()淡出

fadeToggle()相当于切换显示淡入和淡出

fadeTo("slow","0.7")设置透明度，值在0~1之间

可以带有参数：“slow”,"fast"以及毫秒单位的数值

6.jQuery HTML

捕获内容和设置内容：

text()设置或返回所选元素的文本内容

html()设置或返回所选元素的内容（包括HTML标记）

val()设置或返回表单字段的值

attr()获取属性

添加元素内容：

append()在文本后面添加

prepend()在文本开头前面追加

移除元素：

remove()删除备选元素以及子元素，可以添加参数进行删除过滤

empty()删除子元素

css操作

addClass()向备选添加一个或者多个类

removeClass()从备选元素中删除一个或者多个类

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

css()设置和返回样式属性，也可以设置多个css属性

尺寸：

width()设置或者返回元素的宽度
height()设置或者返回元素的高度
innerWidth()返回元素的宽度，包括内边距
innerHeight()返回元素的高度，包括内边距
outerWidth()返回元素的高度，包括内边距和边框
outerHeight()返回元素的高度，包括内边距和边框