jQuery基本操作笔记
jQuery 是一个 JavaScript 库，在理解上，类似于python的pandas。封装了avaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
一、下载和使用
本地下载使用
<head>
<script src="/path/to/jquery-3.5.1.min.js"></script>
</head>网络资源
<head>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
</head>二、语法
基础语法：$(selector).action()
$定义 jQuery;
selector选择 HTML 元素
action() 执行对元素的操作
为了防止文档在完全加载之前运行 jQuery 代码，利用以下代码进行安全加载。
$(document).ready(function(){
// jQuery Codes;
}jQuery 选择器
选择器类似于css的选择器，# . : [] this等符号的使用。
- $(“p”)：页面中选取所有 元素
- $(“#test”)： 页面中属性id=”test”的标签
- $(“.test”)：通过指定的 class（class=”test”） 查找元素。
$("#id", ".class") 复合选择器
$(div p span) 层级选择器 //div下的p元素中的span元素
$(div>p) 父子选择器 //div下的所有p元素
$(div+p) 相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p) 兄弟选择器 //div后面的所有p元素(同级别)
$(.p:last) 类选择器 加 过滤选择器 第一个和最后一个（first 或者 last）
$("#mytable td:odd") 层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)") 索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']") 属性选择器
$("p:contains(test)") // 内容过滤选择器，包含text内容的p元素
$(":emtyp") //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden") //所有隐藏元素 visible
$("input:enabled") //选取所有启用的表单元素
$(":disabled") //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素三、使用举例
事件：click();dblclick();on();Change();keypress()等
<html>
<head>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
$("p").on("click",function(){
alert("p is clicked!");
});
$("input").change(function(){
alert("input has changed!");
});
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<input ></input>
<h2>h2</h2>
<p>p1</p>
<p>p2</p>
<button>click</button>
</body>
</html>四、jQuery DOM 操作
DOM = Document Object Model（文档对象模型），HTML 和 XML 。
> $("#test").text();$("#test").html();$("#test").val(); 分别返回ID=“test”的文本，html和输入内容。
> $("p").append("追加文本");
> $("p").prepend("在开头追加文本");
> $("#div1").remove();
> $("#div1").empty();
0 Comments