标签:file 焦点 本地 框架 libs first master com fir
jQuery是一个轻量级的JavaScript函数库
特征:”写的少,做的多“
jQuery是目前最流行的JS框架,而且提供了大量的扩展
可以在本地下载后引入jquery,也可以采用cdn的方式,比如说:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
在控制台上可以使用$.fn.jquery命令查询你使用jquery版本
基础语法:
$(selector).action()
$符号代表jQuery,
selector是选择符,实际值为要查询或者查找的HTML元素,比如”h1“,"p",再补充一个this,
action()表示对元素进行的操作,比如说hide()隐藏,show()显示
$("h1").hide("fast");
这句话的意思是隐藏标签为
元素选择器
.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") | 选取奇数位置的 | |
在线实例 |
在元素在移动鼠标
选取单选按钮
点击元素
常见的DOM事件
鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
---|---|---|---|
click | keypress(键按下) | submit | load |
dblclick(双击) | keydown(键按下的过程) | change | resize(浏览器窗口调整大小) |
mouseenter(鼠标进入) | keyup(键被松开) | focus(获得焦点) | scroll(滚动) |
mouseleave(鼠标离开) | blur(失去焦点) | unload(离开页面) | |
hover(鼠标悬停再被选元素上时) | ready(当DOM准备就绪时,指定一个函数来执行) | ||
holdReady 暂停或恢复ready()事件的执行 |
hide() 隐藏
show()显示
toggle()相当于切换显示隐藏和显示
fadeIn()淡入
fadeOut()淡出
fadeToggle()相当于切换显示淡入和淡出
fadeTo("slow","0.7")设置透明度,值在0~1之间
可以带有参数:“slow”,"fast"以及毫秒单位的数值
捕获内容和设置内容:
text()设置或返回所选元素的文本内容
html()设置或返回所选元素的内容(包括HTML标记)
val()设置或返回表单字段的值
attr()获取属性
添加元素内容:
append()在文本后面添加
prepend()在文本开头前面追加
移除元素:
remove()删除备选元素以及子元素,可以添加参数进行删除过滤
empty()删除子元素
css操作
addClass()向备选添加一个或者多个类
removeClass()从备选元素中删除一个或者多个类
toggleClass()对被选元素进行添加/删除的切换操作
css()设置和返回样式属性,也可以设置多个css属性
尺寸:
标签:file 焦点 本地 框架 libs first master com fir
原文地址:https://www.cnblogs.com/ma1998/p/13983440.html