jQuery-02（$工具和CSS样式）

最新推荐文章于 2022-07-22 00:07:08 发布

Gorgeous_Tang

最新推荐文章于 2022-07-22 00:07:08 发布

阅读量1.4k

点赞数 2

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/weixin_65479202/article/details/123419202

版权

这篇博客详细介绍了jQuery中的$工具方法，包括$.each()、$.trim()、$.type()等，以及属性方法如.attr()、.removeAttr()、.addClass()等，并通过实例演示了如何使用。同时，还探讨了jQuery中的CSS方法，如设置样式、获取位置和尺寸等，提供了丰富的代码示例。

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

$工具方法

一：$是什么？？？
是一个函数，来源于jQuery库中
         window.jQuery = window.$ = jQuery;（$ jQuery是等价的）
         把jQuery和$作为了window的一个属性
         jQuery库------自执行函数（定义后自己调用了）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// $这个符号到底是什么？
			// ------》其实就是一个函数，来源于jQuery库中
			// window.jQuery = window.$ = jQuery;
			// 把jQuery和$作为了window的一个属性
			// jQuery库------自执行函数（定义后自己调用了）
			// $ jQuery是等价的
			(function() {
				alert(123)
			}())
			// 参数传递不同，效果也不一样。

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

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

			// $(dom对象)   js--》jQUery

			// $(function(){})
			// jQuery(function(){})

			// 判断类型[object Function]
			console.log(Object.prototype.toString.call($))
			console.log(window.jQuery === window.$) //true
			console.log(jQuery === $) //true

			// $是jQuery中为window对象定义的属性   jQuery
			//  window.jQuery = window.$ = jQuery; 
			// Object.prototype.toString.call($) 可以知道$也是一个函数
			// jQuery文件中有一个基本骨架  自执行函数
			// $(function(){})
			// $与jQuery在使用时可以互换
		</script>
	</head>
	<body>

	</body>
</html>

二：$工具方法

1. $.each(): 遍历数组或对象中的数据
2. $.trim(): 去除字符串两边的空格
3. $.type(obj): 得到数据的类型
4. $.isArray(obj): 判断是否是数组
5. $.isFunction(obj): 判断是否是函数
6. $.parseJSON(json) : 解析json字符串转换为js对象/数组

案例一：演示$工具方法

<!DOCTYPE html>
<html lang="en">
   <head>
       <meta charset="UTF-8">
       <title>工具方法的使用</title>
       <script src="js/jquery-3.3.1.min.js"></script>
       <script>
           /*加载事件*/
           $(function() {

               // id $("#id")
               // class $(".class")
               // $("div")

               //$("li:first") 取第一个
               //$("li:last") 取最后一个

               //$("li:eq(3)") 取第四个
               //$("li:gt(3)") 取第四个和以上的
               //$("li:lt(4)") 取第四个和以下的

               //$("li:odd") 奇数
               //$("li:even") 偶数

               var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
               //求和
               var sum = 0
               //遍历 $.each()
               $.each(arr, function(i, e) {
                   console.log("下标:" + i, "值" + e)
                   sum += e;
               })
               console.log(sum)

               //定义对象
               var obj = {
                   name: "小乖",
                   sex: "🚺",
                   size: "210"
               }
               //使用$遍历对象
               $.each(obj, function(i, e) {
                   console.log("属性名：" + i, "属性值:" + e)
               })

               //取出空格
               var str = " 123 "
               str = $.trim(str)
               console.log(str)

               //type 查看类型
               console.log($.type(arr)) //Array
               console.log($.type(obj)) //Object
               console.log($.type(sum)) //Number
               console.log($.type(str)) //String
               console.log($.type($("input"))) //集合

               //isArray 查看是否时数组
               console.log($.isArray($("input"))) //集合
               console.log($.isArray(arr)) //数组
               //js Array.from()
               console.log($("input").toArray()) //将集合变成数组

               function fn() {
                   alert('--')
               } //定义一个函数
               var ts = fn
               console.log($.isFunction(ts)) //是否时一个函数

               //JSON 将对象变成字符串（将字符串变成对象）
               var goods = {
                   name: "可乐",
                   price: 25
               }
               var os = JSON.stringify(goods) //将对象变成字符串
               console.log(os)

               var bs = '{"name":"可乐","price":25}'
               var obja = $.parseJSON(bs) //将字符串变成对象
               console.log(obja.name, obja.price)

               //数组
               var a1 = JSON.stringify(arr)
               console.log(a1)

               var b1 = '[1,2,3,4,5,6,7,8,9,10,11,12]'
               var b2 = $.parseJSON(b1)
               console.log(b2)

           })

           function dj() {
               //遍历对象数组
               var count = 0;
               var str = "";
               $("input").each(function(i, e) {
                   console

最低0.47元/天解锁文章

Gorgeous_Tang

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-02（$工具和CSS样式）

$工具方法一：$是什么？？？是一个函数，来源于jQuery库中 window.jQuery = window.$ = jQuery;（$ jQuery是等价的）把jQuery和$作为了window的一个属性 jQuery库------自执行函数（定义后自己调用了）<!DOCTYPE html><html> <head> <meta charset="utf-8">...
复制链接

扫一扫