jQuery学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

阳仔的蘑菇头

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量146

点赞数

文章标签： js jquery

本文链接：https://blog.csdn.net/u010941527/article/details/105456307

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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 出发时鼠标相对于源元素坐标系统

阳仔的蘑菇头

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记

jQuery安装下载地址 https://jquery.com/#Download_jQueryMicrosoft CDN：google CDN:方法查找html属性修改html内容修改文本内容修改值的获取与修改css属性获取与修改类的添加、删除和判断元素的新建与删除<!DOCTYPE html><html lang="en"&gt...
复制链接

扫一扫

专栏目录