jQuery $工具方法与Css属性方法

Naraseny

已于 2022-03-18 20:04:19 修改

阅读量897

点赞数

分类专栏： jQuery html JS 文章标签： javascript 前端 html css jquery

于 2022-03-18 20:04:00 首次发布

本文链接：https://blog.csdn.net/qq_62881798/article/details/123583228

版权

JS 同时被 3 个专栏收录

31 篇文章 1 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

jQuery

6 篇文章 0 订阅

订阅专栏

本节内容：

append 追加的方法：

html 替代了js中的innerHTML属性可设置可获取:

本节内容：

append 追加的方法：

$("#oDiv").append($("<a href='#'>百度</a>"));

html 替代了js中的innerHTML属性可设置可获取:

$("#oDiv").html("<p>标题一</p>");
$("#oDiv").html($("<a href='#'>百度</a>"));

$(js对象) 作用：转换作用:

将一个原生态的jsdom对象转换成jQuery的dom对象
获取oDiv设置内容

oDiv 获取标签
console.log($(document.getElementById("oDiv")).html())

jQuery----->原生态js:

注意：通过选择器获取的jQuery对象都是以伪数组的形式存储的
可以通过下标转换成js对象

var $oDiv = $("#oDiv");
// 通过下标过去
console.log($oDiv[0].innerHTML)
// 第二种方法 通过get方法 下标获取
console.log($oDiv.get(0).innerHTML)

each(); 遍历数组对象对象数组

$----类似java中的类
$()----类似java中的类的构造方法
$工具中的类方法
定义数组 var arr=[] var arr=Array();
定义一个数组存储五个名字

var name = ["张三", "里斯", "王五", "蛮子", "小六子"];
				//遍历数组
				$.each(name, function(index, names) {
					//第一种方法
					console.log(index, names);
					//第二种下标
					console.log(name[index])
				})
 
				// 对象的定义{}
				var student = {
					"name": "张三",
					"sex": "男",
					"age": 18
				}
		 	// 遍历对象
				$.each(student, function(name, value) {
			 	console.log(name, value)
				})
				//对象数组的定义
				var students = [{
						"name": "张三",
						"sex": "男",
						"age": 18
					},
					{
						"name": "张三2",
						"sex": "女",
						"age": 19
					}
				]
				//遍历对象数组
				$.each(students, function(index, stu) {
					$.each(stu, function(name, value) {
				 	console.log(name, value)
					})
				})

$工具代码:

                2. trim 去掉两端空格
				var stu = "asd   ";
				console.log($.trim(stu).length)
 
				// 3.type(); 判断值类型
				var st = "asd   ";
				console.log($.type(st)) //返回String
				
				// 4.isArray(); 判断是否是一个数组
				var names = ["张三", "里斯", "王五", "蛮子", "小六子"];
				console.log($.isArray(names)) //返回布尔值类型 
				
				//5.isFunction() 判断是否是一个函数
				console.log($.isFunction(jQuery));
				
				// （6）parseJSON()  将满足json定义的字符串转换成一个对象或者对象数组
				var stu = "[\"aa\",\"bb\",\"cc\"]";
				var stu = '["aa","bb","cc"]';
				console.log($.type(stu))
				// 通过parseJSON转换
				var stuArr = $.parseJSON(stu)
				console.log($.type(stuArr));

jQuery中的加载函数的定义:

$(document).ready(function(){  
     alert("第一种方法。");   
});
$(function(){  
    alert("第二种方法。");  
});

jQuery中的鼠标移入移除事件演示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.odd {
				background-color: #FFFF00;
			}
		</style>
	</head>
	<body>
		<table border="1" width="100%" height="400">
			<tr style="background-color: aqua;">
				<th>&nbsp;</th>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
				<td>&nbsp;</td>
			</tr>
 
		</table>
	</body>
	<script type="text/javascript">
		// even 奇数 odd 偶数 过滤器
		// $("table>tbody>tr:gt(0):even").addClass("odd")
		//鼠标触碰事件 mouseover
		$("table>tbody>tr:gt(0)").mouseover(function() {
			$("table>tbody>tr:gt(0)").removeClass("odd");
			$(this).addClass("odd")
		})
		//鼠标离开触碰事件
		$("table>tbody>tr:gt(0)").mouseout(function() {
			$(this).removeClass("odd");
 
		})
	</script>
</html>

Naraseny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery $工具方法与Css属性方法

本节内容：append 追加的方法：$("#oDiv").append($("<a href='#'>百度</a>"));html 替代了js中的innerHTML属性可设置可获取:$("#oDiv").html("<p>标题一</p>");$("#oDiv").html($("<a href='#'>百度</a>"));$(js对象) 作用：转换作用:将一个...
复制链接

扫一扫