jQuery基本操作笔记

jQuery 是一个 JavaScript 库,在理解上,类似于python的pandas。封装了avaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

一、下载和使用

https://jquery.com/download/
本地下载使用
<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等符号的使用。

  1. $(“p”):页面中选取所有 元素
  2. $(“#test”): 页面中属性id=”test”的标签
  3. $(“.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();
Categories: Web

0 Comments

Leave a Reply

Your email address will not be published.