jQuery——$工具方法；jQuery属性和css

最新推荐文章于 2024-09-14 18:52:56 发布

小羊持续开发

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量320

点赞数

文章标签： jquery javascript css

本文链接：https://blog.csdn.net/ys_chy/article/details/123414640

版权

本文详细介绍了jQuery的基本概念，包括$的作用、jQuery文件结构、jQuery与$的关系，以及如何使用jQuery选择器、方法和工具函数。示例中演示了$.each()、$.trim()、$.type()等方法，并提供了DOM与jQuery对象相互转换的实例。同时，文章还涵盖了jQuery中的属性操作和CSS相关属性的获取。

摘要由CSDN通过智能技术生成

$介绍：

1.$是什么？

$(function(){});

如果使用上述语句报错了 $ is not deifned，就说明没有引入jQuery文件。

2.jQuery文件结构

其实时一个自执行函数

(function(){
    window.jQuery = window.$ = jQuery
}());

3.jQuery与$关系

a.引入一个js文件，是会执行这个js文件中的代码的
b.jQuery文件时一个自执行函数，执行这个jQuery文件中的代码，其实就是在执行这个自执行函数
c.这个自执行文件就是window对象添加一个jQuery属性和$属性。
console.log(window);
d.$其实和jQuery是等价的，是一个函数。

window.jQuery === window.$

Object.prototype.toString.call($);

$是一个函数
参数传递不同，效果也不一样。

$(function(){}) 入口函数

$("") 选择器/创建一个标签

$(dom对象) js--》jQUery

dom对象：原生态js选择器获取到的选择器
jQuery对象：利用jQuery选择器获取到的对象。

dom---->jQuery

var oDiv = document.getElementById('');
var $oDiv = $(oDiv)

jQuery--->1.dom 通过下标

var $div = $("#oDiv");
var div = $div[0];

2.使用jQuery的方法

var $div = $("#oDiv");
var div = $div.get(0);

$工具方法和jQuery属性：

有具体注释

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.div {
				background-color: red;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function() {
				//$.each()方法：遍历数组，对象，对象数组中的数据
				var arr = ["aa", "bb", "cc"];
				$.each(arr, function(index) {
					console.log(arr[index]);
				})

				var obj = {
					"name": "aa"
				};
				$.each(obj, function(name, value) {
					console.log(name, value);
				})

				var arrobj = [{
						"name": "aa"
					},
					{
						"name": "bb"
					},
					{
						"name": "cc"
					},
					{
						"name": "dd"
					}
				];
				$.each(obj, function(index, obj) {
					console.log(index, obj);
				})

				// $.trim()方法：去除空格
				var str = "  12345  "
				console.log(str.length);
				console.log($.trim(str).length);

				// $.type()方法：得到数据的类型
				var str = "  12345  "
				console.log($.type(str));

				var obj = {
					"name": "aa"
				};
				console.log($.type(obj));

				// $.isArray()方法:判断是否是数组
				console.log($.isArray(str));
				console.log($.isArray(arr));

				// $.isFunction()方法：判断是否是函数
				function aa() {
					console.log(123);
				}
				console.log($.isFunction(aa));

				// $.parseJSON()方法：解析json字符串（符合定义js对象，数组语法）转换成js对象/数组
				var json = $.parseJSON(var obj = {
					"name": "aa"
				};)

			});
		</script>
	</head>
	<body>
		<div id="oDiv1" style="width: 100px;height: 100px;"></div>
		<button id="oBtn1" type="button">点击获取</button>
		<button id="oBtn2" type="button">点击设置</button>
		<script type="text/javascript">
			// attr():获取某个标签属性的值，或设置某个标签属性的值（非表单元素）
			$("#oBtn1").click(function() {
				alert($("#oDiv1").attr("width"));
			})
			$("#oBtn2").click(function() {
				$("#oDiv1").attr("name", "demo");
			})
		</script>
		<div id="oDiv2" name="sb">

		</div>
		<button id="oBtn3" type="button">点击移除属性</button>
		<script type="text/javascript">
			$("#oBtn3").click(function() {
				// $.removeAttr()：移除属性
				$("#oDiv2").removeAttr("name");
			})
		</script>
		<button id="oBtn4" type="button">添加到class属性</button>
		<button id="oBtn5" type="button">移除到class属性</button>
		<script type="text/javascript">
			$("#oBtn4").click(function() {
				// $.addClass():给某个标签添加到class属性（整个）
				$("#oDiv2").addClass("div");
			})
			$("#oBtn5").click(function() {
				// $.removeClass():给某个标签移除到class属性（整个）
				$("#oDiv2").addClass("div");
			})
		</script>
		<input type="text" name="" id="inp" value="" />
		<button id="oBtn6" type="button">获取</button>
		<script type="text/javascript">
			$("#oBtn6").click(function() {
				// prop():获取某个标签属性的值，或设置某个标签属性的值（表单元素）属性值为Boonlean类型时
				$("#inp").prop("value");
			})
		</script>
	</body>
</html>

jQuery属性和css

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#oDiv {
				width: 100px;
				height: 100px;
				background-color: #6495ED;
				position: absolute;
				left: 200px;
				top: 100px;
				border: 10px solid #FFC0CB;
				padding: 100px;
			}

			.oBox {
				/* 相对定位 */
				position: relative;
				width: 50px;
				height: 50px;
				background-color: lightcoral;
				left: 20px;
				top: 20px;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//为了实现滚动条效果
			for (var i = 1; i <= 2000; i++) {
				document.write("<br />");
			}
			$(function() {
				var $oDiv = $("#oDiv");
				var $oBox = $(".oBox");
				//相对窗体
				console.log($oDiv.offset().left);
				console.log($oDiv.offset().top);

				//绝对定位
				console.log($oBx.position().left);
				console.log($oBx.position().top);

				//滚动条
				$(window).scroll(function() {
					console.log($(this).scrollTop());
				});


				//容器宽
				console.log($oDiv.width());
				//width+padding
				console.log($oDiv.innerWidth());
				//width+padding+border
				console.log($oDiv.outerWidth());
			});
		</script>
	</head>
	<body>
		<div id="oDiv">
			<div class="oBox"></div>
		</div>
	</body>
</html>