文档章节

jQuery基础 - 常用基本属性

ZHAO_JH
 ZHAO_JH
发布于 2018/07/31 11:35
字数 2114
阅读 20
收藏 6

jQuery简介

jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程

jQuery 对象是通过jQuery包装DOM对象后产生的对象,jQuery对象是jQuery独有的,如果一个对象就是jQuery对象,那么它就可以使用jQuery里的方法

jQuery 内部实际使用的 JavaScript 的 XMLHttpRequest 对象

基本语法

$(选择器).动作()

jQuery 对比 与 JavaScript 对比

写法 代码 释义
jQuery $("#test").html() 获取 ID 为 test的元素内 html代码。其中html()是 jQuery 中的方法
JavaScript document.getElementById("test").innerHTML 获取 ID 为 test的元素内 html代码

jQuery 基本示例

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div>hello jQuery</div>

<script>
	jQuery("div").css("color","red")
</script>
</body>
</html>

标签属性操作

用法 释义
$("标签").html() 标签HTML内容
$("标签").attr("标签属性") 获取标签属性(属性值)
$("标签").removeAttr("标签属性") 移除指定标签属性
$("标签").attr("标签属性","增加/变更属性") 增加或变更属性
$("标签").prop("标签属性") 获取标签属性(布尔值)
$("标签").removeProp("标签属性") 移除指定标签属性
$("标签").prop("标签属性","增加/变更属性") 获取标签属性,并新增或变更属性
$(this) 获取的标签本身
<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div id="div_sty" con="111" >测试 div 标签</div>
<script>

	//获取标签属性(属性值)
	console.log($("div").attr("con"));				//获取指定属性值
	console.log($("div").removeAttr("con"));		//移除指定属性	
	console.log($("div").attr("Newcon","NewText"));	//获取并变更指定属性值,不存在则添加,存在则变更

	//获取标签属性(布尔值)
	console.log($("div").prop("id"));				//判断指定属性是否存在
	console.log($("div").removeProp("id"));			//移除指定属性
	console.log($("div").prop("class","test"));		//判断指定属性是否存在,不存在则添加,存在则变更

	$("div")
</script>

标签位置和尺寸

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	*{margin: 0px;}
	.outer{position: absolute;left:50px;top:10px;background-color: yellow;height: 300px;width: 400px;}
	.con{position: relative; background-color: pink;height:200px;width:300px;left:20px;top:30px;padding-top:1px;padding-left:2px;margin: 3px auto auto 4px;}
</style>
<body>
	<div class="outer">
		<p class="con"></p>
	</div>
</body>
<script>

	//获取位置
	console.log($(".con").position().left);			//相对于上层标签的偏移量
	console.log($(".con").offset().left);			//相对于视图标签的偏移量

	//获取高度
	console.log($(".con").height());				//获取标签高度
	console.log($(".con").innerHeight());			//获取内部区域高度
	console.log($(".con").outerHeight(true));		//获取标签高度(设置为 true 时,计算边距在内)

	//获取宽度
	console.log($(".con").width());					//获取标签宽度
	console.log($(".con").innerWidth());			//获取内部区域段杜
	console.log($(".con").outerWidth(true));		//获取标签宽度(设置为 true 时,计算边距在内)

</script>
</html>

jQuery 绑定事件

为每个匹配元素的特定事件绑定事件处理函数,可以同时绑定多个事件类型

  • 和 js 中的 onclick 绑定方式不同,但因为jQuery本身是基于js写的运行库,所以onclick绑定方式也可以在jQuery中使用

this 使用

  • onclick(this),获取当前标签,在函数中js用this,jQuery用$(this)
  • 其它绑定方式不用在方法中传递this参数,可以直接使用this

JavaScript绑定方式:

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
	<button onclick="showtime()">这是一个测试标签,点击触发事件</button> 

<script>
    function showtime() 			        //定义方法
    {
       alert("hello world")					//事件方法内容
    };
    
 </script>
</body>
</html>

jQuery绑定方法一:

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
	<button>这是一个测试标签,点击触发事件</button> 

<script>
    $("button").click(function () 			//选定标签绑定事件方法
    {
       alert("hello world")					//事件方法内容
       alert($(this).html())				//标签本身的HTML内容
    });
    
 </script>
</body>
</html>

jQuery绑定方法二:

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
	<button>这是一个测试标签,点击触发事件</button> 

<script>
    $("button").bind("click",function () 	//选定标签绑定事件方法
    {
       alert("hello world");				//事件方法内容
       alert($(this).html())				//标签本身的HTML内容
    });
    //$("button").unbind("click");			//解除绑定
 </script>
</body>
</html>

jQuery绑定方法三:

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	div {height: 200px;width: 200px;background-color: green;}
</style>
<body>
	<button>这是一个测试标签,点击触发事件</button> 

<script>
    $("button").on("click",function () 	//选定标签绑定事件方法,提供绑定事件处理程序所需的所有功能
    {
       alert("hello world");			//事件方法内容
       alert($(this).html())				//标签本身的HTML内容
    });
    //$("button").off("click");			//删除事件绑定
 </script>
</body>
</html>

进度条控制

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	body{height: 2000px;}
	.Go_Top{position: fixed;height: 50px;width: 100px; bottom: 50px;right: 50px;background-color: #ccc;text-align: center;line-height: 50px;}
</style>
<body>
	<div class="Go_Top" onclick="returnTop()">返回顶部</div>

<script>
    function returnTop() 
    {
       $(window).scrollTop(0)			//滚动条与视窗间距为0,即窗口返回顶部
    }
    
 </script>
</body>
</html>

标签内容操作

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div id="div_sty">
		<div>测试标签1</div>
		<p>测试标签2</p>
	</div>
<script>
	console.log($("#div_sty").html());		//获取标签内容(包含子标签和标签内容)
	$("#div_sty").html("<h1>新标签</h1>");	//修改标签
</script>
</body>
</html>

标签文本操作

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div id="div_sty">
		<div>测试标签1</div>
		<p>测试标签2</p>
	</div>
<script>
	console.log($("#div_sty").text());		//获取标签内容(只含标签里的内容)
	$("#div_sty").text("新文本");			//修改标签内容
</script>
</body>
</html>

表单标签value值操作

非value固有属性的标签不生效

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<input type="text" value="test">
<script>
	console.log($(":text").val());		//获取标签 value 属性值
	$(":text").val("New_test");			//变更 value 属性值
</script>
</body>
</html>

form标签内容获取

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
    <form id="TestID">
	    用户<input name="user" type="text">
	    密码<input name="passwd" type="password">
	    <div onclick="aaa()">点击显示获取数据</div>
	</form>
<script>
function aaa(){
	var data = $("#TestID").serialize();
	//获取form中标签内容方法
	alert(data);
}
</script>
</body>
</html>

jQuery遍历

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
	<div class="test">第一个标签</div>
	<p class="test">第二个标签</p>
	<strong class="test">第三个标签</strong>
<script>
	array=["a","b","c"];
	//循环遍历-方式一
	$.each(array,function(x,y) {
		console.log(x);			//遍历值的下标序列号
		console.log(y);			//遍历的值
	})

	//循环遍历-方式二
	$(".test").each(function(){
		console.log($(this));	//遍历所有标签
	})
</script>

</body>
</html>
0
a
1
b
2
c
[div.test]
[p.test]
[strong.test]

jQuery标签的增删改

<html>
 <head>
 	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <style>
		.div1 { width: 300px;height: 100%;color: #000;float: left;text-align: center;background-color: #FFCCCC; }
		div p { background-color: #fff;}
	</style> 
 </head> 
 <body> 
  <div class="div1"> 
   <h3>jQuery的增删改查</h3> 
   <button att="add">添加标签</button> 
   <button att="del">删除标签</button> 
   <button att="replace">替换标签</button> 
  </div> 
  <script>

	
	//添加节点标签函数
	$("[att='add']").click(function(){
		var $ele=$("<p>");					//创建标签,声明变量为 ele
		$ele.html("新增的 p 标签");			//设定新增标签中元素
		$(".div1").append($ele);			//把设定好的标签和标签内元素添加到指定位置
	});
	
	//删除节点标签函数
	$("[att='del']").click(function(){
		$(".div1 > p").last().remove();		//选定要删除的标签进行删除操作

	});

	//修改节点标签函数
	$("[att='replace']").click(function(){
		$(".div1 > h3").replaceWith("<h2>替换后的新标题</h2>");
	});
</script>
 </body>
</html>

jQuery类样式的增删改

<!DOCTYPE html>
<html>
<head>
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<style>
	.div_sty{color: red;}
	.New_sty{text-align: center;}
</style>
<body>
	<div class="div_sty">测试 div 标签</div>
<script>
	$("div").addClass("New_sty");					//添加指定标签类样式
	$("div").removeClass("div_sty");				//删除指定标签类样式
	$("div").css("backgroundColor","blue");			//修改指定标签类样式
</script>
</body>
</html>

jQuery克隆标签元素

一个布尔值(true 或者 false)指示事件处理函数是否会被复制。V1.5以上版本默认值是:false

<!DOCTYPE html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class="outer">
    <div>
        <button onclick="add(this)">+</button>
        <input type="text">
    </div>
</div>

<script>
    //克隆元素
    function add(self) {
        var $clone_obj=$(self).parent().clone(true);                                        //定义克隆元素
        $clone_obj.children("button").html("-").attr("onclick","remove_obj(this)");         //变更克隆元素子级内容
        $(".outer").append($clone_obj);                                                     //添加克隆修改后的元素
    }
    //删除元素
    function remove_obj(self) {
        $(self).parent().remove();                                                          //删除当前级父级标签元素
    }
</script>
</body>
</html>

扩展方法

<!DOCTYPE html>
<html>
<head>
 	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<script>
	var settings = { validate: false, a:1, b:"2" };
	var options = { validate: true, c: "3" };
	jQuery.extend(settings, options);
	console.log(settings)
</script>
</body>
</html>

© 著作权归作者所有

ZHAO_JH
粉丝 17
博文 203
码字总数 182453
作品 0
宝山
运维
私信 提问
python3爬虫基础-pyquery解析库

简介 看名称和jQuery比较接近,对没错,pyQuery允许您对XML文档进行jQuery查询。API尽可能类似于jQuery。pyquery使用lxml进行快速XML和html操作。支持CSS选择器,操作在查找和操作HTML上是非常...

ZHAO_JH
05/19
12
0
jQuery基础与JavaScript与CSS交互-第五章

目录 JavaScript框架种类及其优缺点 jQuery库 jQuery对象$ 掌握基本选择器 掌握过滤选择器 掌握表单选择器 RIA技术 常见的RIA技术 Ajax Sliverlight Flex 什么是框架? 框架是程序员将一个又...

达叔小生
2018/08/03
0
0
jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge
2018/05/17
0
0
从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN...

fengdaoting
2018/07/04
0
0
Dojo 与 jQuery 综合比较分析

最近Dojo 和jQuery双双发布了最新的1.8版本,有着相同版本号的两个Javascript库也有许多核心的相同之处:相同的资源加载机制AMD、相同的选择 器 引擎Sizzle等。作为业界知名的Javascript库,...

鉴客
2012/07/09
12.5K
21

没有更多内容

加载失败,请刷新页面

加载更多

JAVA CAS单点登录之三:CAS代理模式演练

前言 JAVA CAS单点登录之一:搭建CAS服务器 JAVA CAS单点登录之二:CAS普通模式1演练 代理模式相相对上一节的普通模式,更加复杂了。但配置起来也会稍微有些差别。所谓难者不会,会者不难。如...

彬彬公子
29分钟前
4
0
Webfont 的兼容性问题[持续更新]

本文转载于:专业的前端网站➺Webfont 的兼容性问题[持续更新] 低版安卓手机的 webview 显示不了,另外黑莓手机显示出来是这样: 生成工具: 离线字体生成工具:webfont 在线字体生成平台:ico...

前端老手
34分钟前
3
0
调用链与日志关联的探索式查询

摘要:本文将就Observability中的日志聚合、分布式跟踪及具体应用中结合使用进行展开说明。 一、Observability Observability是一个最近几年开始在监控社区流行的术语。本文将Observability...

宜信技术学院
34分钟前
3
0
Java常见异常处理

异常是Java程序中经常遇到的问题,一个异常就是一个Bug,就要花很多时间来定位异常。 Java异常 (1)Throwable是Java异常的顶级类,所有的异常都继承于这个类。 (2)Error,Exception是异常...

daxiongdi
52分钟前
4
0
Validator 常用注解

说明 Validator主要是校验用户提交的数据的合理性的,比如是否为空了,密码长度是否大于6位,是否是纯数字的,等等。那么在spring boot怎么使用这么强大的校验框架呢。 常用 [@null](https:...

五彩的颜色
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部