jQuery
安装
下载地址 https://jquery.com/#Download_jQuery
Microsoft CDN:
google CDN:
方法
- 查找
- html属性修改
- html内容修改
- 文本内容修改
- 值的获取与修改
- css属性获取与修改
- 类的添加、删除和判断
- 元素的新建与删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script type="text/javascript" src="js/jquery-3.4.1.js"></script>> -->
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
<script>
function fun(){
//查找
$("CSS选择器");
//找当前的下一个,上一个,下面所有,上面所有,和除此以外的所有,注意!都是平级的查找
$("#container").next().attr("name","foot");
$("#container").prev().attr("name","foot");
$("#container").nextAll().attr("name","foot");
$("#container").prevAll().attr("name","foot");
$("#container").siblings().attr("name","demo");
//属性修改
$("a:eq(0)").attr("href","http://baidu.com");
//html内容获取
console.log($("p").html());
//html内容修改
$("p").html("<strong>大大大标题</strong>");
//文本内容获取
console.log($("p").text());
//文本内容修改
$("p").text("小小小标题");
//值获取
console.log($("input:eq(1)").val());
//值修改
$("input:eq(1)").val("我被改了");
//获取CSS属性
console.log($("aside").css("background-color"));
//修改CSS属性
$("aside").css("background-color","yellow");
//是否有类
console.log($("div").hasClass("reg"));
//添加类
$("div:eq(0)").addClass("con");
//移除类
$("div:eq(1)").removeClass("reg");
//创建新元素
var $li = $("<li title='香蕉'>香蕉</li>");
//新元素添加到DOM
$("ul").append($li);
//删除元素
$("ul li:eq(1)").remove();
//带层级,带条件判断的删除元素
$("ul li a").remove("a[href=#]");//用微软的jQuery支持,用本地的3.4.1不支持
}
window.onload=fun;
</script>
</head>
<body>
<header>
<p>title</p>
</header>
<nav>
<ul>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
<li><a href="#">导航</a></li>
</ul>
</nav>
<div id="container">
<aside style="width:120px;height:100px;background-color:red;">
<input type="text" value="请输入...">
<input type="text" value="被改变项">
</aside>
</div>
<footer>
<div class="reg"></div>
</footer>
</body>
</html>
事件
- 绑定
$("#btn").bind("click",function(e){
console.log("123");
})
//e是事件信息:screenxy,keyCode等
e返回的参数:
1. clientX 触发时鼠标相对于浏览器
2. screenX 触发时鼠标相对于屏幕
3. offset 出发时鼠标相对于源元素坐标系统