0
点赞
收藏
分享

微信扫一扫

jQuery——02($工具方法和CSS)

乱世小白 2022-03-12 阅读 78

1.是什么?


$(function(){});
如果使用上述语句报错了  $ is not deifned,就说明没有引入jQuery文件。


2.jQuery文件结构


其实时一个自执行函数
(function(){
    window.jQuery = window.$ = jQuery
}());



3.
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库------自执行函数(定义后自己调用了)

// $ jQuery是等价的



 加载函数|入口函数|载入函数

 (function() {
                alert(123)
            }())

 详情代码如下

案例一:

<!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>
		

案例二:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
<style type="text/css">
			.obox {
				width: 100px;
				height: 100px;
				border: 1px solid aqua;
			}
		</style>
		<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/**
			 * 非行内样式获取法
			 */
			function getStyle(obj, name) { //obj:操作哪一个标签 name:该标签的属性
				if (obj.currentStyle) { //兼容IE
					return obj.currentStyle[name];
				} else { //兼容非IE浏览器---谷歌  火狐等等
					return getComputedStyle(obj, false)[name];
				}
			}

			// js中的dom对象与jQuery对象的互换
			window.onload = function() {
				// 可以使用jQuery吗? 可以
				// 原生态js通过选择器获取元素
				var btn = document.querySelector('button');
				console.log(btn)
				// console.log(getStyle(btn,'width'))
				// 将原生态dom对象    jQuery对象 通过$()进行
				// console.log(btn.html());html()--innerHtml
				console.log($(btn).html())


				var $btn = $("button");
				console.log($btn)
				// console.log(getStyle($btn,'width')) 

				// 将jQuery对象-----js的dom对象
				// 1.通过下标   jQuery得到的标签是一个数组
				console.log(getStyle($btn[0], 'width'))
				// 2.通过get方法
				console.log(getStyle($btn.get[0], 'width'))
			}
		</script>
	</head>
	<body>
		<div class="obox">
		</div>
		<button type="button">点击设置文本内容</button>
	</body>
</html>

案例三: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- jQuery库 -->
			<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		</head>
		<body>
			<script type="text/javascript">
				// $工具方法的使用
				// 	1.$.each():遍历数组、对象、对象数组中的数据
				// (与js中for循环一致)
				// 定义一个数组,保存数据
				var arr = ["yiyi","erer","snasna","sisi"];
				console.log(typeof(arr))
				// index 下标
				// name 值
				$.each(arr,function(index,name)){
					 console.log(arr[index])
				}
				console.log("-------------")
				// 对象中的属性定义  通过Map键值对的形式定义
				var student = {"name":"zhangsan","sex":"nv","age":18};
				console.log(typeof(student))
				// each方法遍历对象
				// name 属性名称
				// value 属性值
				$.each(student,function(name,value){
					console.log(name,value);
				})
				console.log("-------------")
				// 对象数组的定义
				var students =[
					 {"name":"zhangsan1","sex":"nv","age":18},
					 {"name":"zhangsan2","sex":"nv","age":18},
					 {"name":"zhangsan3","sex":"nv","age":18},
					 {"name":"zhangsan4","sex":"nv","age":18}
				];
				// 遍历
				$.each(students,function(index,obj){
					console.log(index,obj);
					$.each(obj,function(name,value){
						console.log(name,value);
					});
				});
				console.log("-------------")
				
				// 	2.$.trim():去除字符串两边的空格
				var str = "      aksjhcd   ";
				// jQuery
				console.log(str.length);
				// js
				console.log($.trim(str).length);
				
				// 	3.$.type(obj):得到数据的类型
				// 与js中的typeof一样
				console.log($.type(arr));//array
				console.log($.type(student));//obj
				console.log($.type(student));//obj
				
				// 	4.$.isArray(obj):判断是否是数组
				console.log($.isArray(student));
				console.log($.isArray(arr));
				
				// 	5.$.isFunction(obj):判断是否是函数
				console.log($.isFunction(getName));
				
				// 	6.$.parseJSON(obj):解析json字符串转换为js对象/数组
			    var stu =" {\"name\":\"zhangsan4\",\"sex\":\"nv\",\"age\":18}";
				console.log($.type(stu));
				var jsonStu = $.parseJSON(stu);
				console.log($.type(jsonStu));
				$.each(jsonStu,function(name,value){
					console.log(name,value)
				});
			</script>
		</body>
	</html>
	

案例四:

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
			    .sb{
					/* border: 10px solid blueviolet; */
					background-color: yellow;
				}
				.obox2{
					width: 100px;
					height: 100px;
					background-color: antiquewhite;
				}
				.sb2{
					background-color: aquamarine;
				}
			</style>
			<!-- jQuery库 -->
			<script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		</head>
		<body>
			<!-- jQuery中的属性和样式设置和获取 -->
			<hr >
			<h2>1.attr():获取某个标签属性的值,或设置某个标签属性的值
			注意事项:可以设置表单元素的属性,但是不能获取</h2>
			<div id="odiv" style="width: 100px;height: 100px;background-color: #00FFFF;">
			</div>
			<input type="text" id="inputs" value="" />
			<button type="button" id="obtn1">点击获取</button>
			<button type="button" id="obtn2">点击设置</button>
			<button type="button" id="obtn3">点击设置input</button>
			<script type="text/javascript">
				$("#obtn1").click(function(){
					alert($("#odiv")).attr("id");
				})
				$("#obtn2").click(function(){
					$("#odiv").attr("name","demo")
				})
				$("#obtn3").click(function(){
					// $("#inputs").attr("name","demo2")
					alert($("#inputs").attr("value"))
				})
			</script>
			<h2>2.removeAttr():删除某个标签属性
			     注:移除整个属性</h2>
			<div name="sb" id="ok">
			</div>
			<button type="button" id="obtn4">移除name属性</button>
			<script type="text/javascript">
				$("#obtn4").click(function(){
					$("#ok").removeAttr("name");
				})
			</script>
			<h2>3.addClass():给某个标签添加class属性值
			    注:如果标签上有class 继续使用addClass后会叠加样式
				<br>
				4.removeClass():删除某个标签class属性值
				</h2>
			<div id="odiv2">
			</div>
			<button type="button" id="obtn5">添加样式</button>
			<button type="button" id="obtn6">移除样式</button>
			<script type="text/javascript">
				$("#obtn5").click(function(){
					$("#odiv2").addClass("obox2");
				})
				$("#obtn6").click(function(){
					$("#odiv2").removeClass("sb");
				})
			</script>
			
			<h2>
				5.prop():和attr()类似,区别在于prop用于属性值为Boolean类型的情况,比如多选(专门用来获取和设置表单元素)
			</h2>
			<input type="text" name="sb" id="one"/>
			<button type="button" class="mybtn">点击设置</button>
			<script type="text/javascript">
			// 获取name属性或者value属性
				$(".mybtn").click(function(){
					$("#one").prop("name","lisi")
					$("#one").prop("value","lisi")
				})
			</script>
			<h2>
				6.html():获取某一个标签体内容(注意:该标签体中可以包含子标签)
			    7.text():获取某一个标签体内容(注意:该标签体不能包含子标签)
			    8.val():主要用户获取/设置输入框的值
			</h2>
			<div id="demo1">
				好好学习
				<div>
					天天开心
				</div>
			</div>
			<input value="123" type="text" id="demo2" />
			<script type="text/javascript">
				console.log($('#demo1').html());
				console.log($('#demo1').text());
				// val()获取非表单元素 结果为空
				console.log($('#demo1').val());
				
				// 表单元素
				console.log($('#demo2').val());
				// 表单元素通过html() 结果为空
				console.log($('#demo2').html());
				// 表单元素通过text() 结果为空
				console.log($('#demo2').text());
				
			</script>
			<hr >
			<h2>案例:表格隔行换颜色</h2>
			<table border="1" width="100%" height="300px">
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
				<tr>
					<td>item1</td>
					<td>item2</td>
					<td>item3</td>
					<td>item4</td>
					<td>item5</td>
				</tr>
			</table>
		  <script type="text/javascript">
			$("table tr:even").addClass("sb");
			$("table tr:odd").addClass("sb2");
		  </script>
			
			<hr >
			<h2>全选</h2>
			<button type="button" id="all">全选</button>
			<button type="button" id="qxall">取消全选</button>
			<input type="checkbox" value="1" />1
			<input type="checkbox" value="2" />2
			<input type="checkbox" value="3" />3
			<input type="checkbox" value="4" />4
			<input type="checkbox" value="5" />5
			<script type="text/javascript">
				$("#all").click(function(){
					// 获取所有的复选框
					$("input:checkbox").each(function(){
						// console.log($(this).val())
						$(this).prop("checked",true)
					})
				})
				$("#qxall").click(function(){
					// 获取所有的复选框
					$("input:checkbox").each(function(){
						// console.log($(this).val())
						$(this).prop("checked",false)
					})
				})
			</script>
			<pre>
				
				
				
				
				
				
			</pre>
		</body>
	</html>
	

案例五:

目录

1.是什么?

2.jQuery文件结构

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

 详情代码如下:


 

举报

相关推荐

jQuery02工具方法&属性CSS

jQuery02($工具&属性&CSS)

JQuery_02 $工具&CSS样式

jQuery工具方法和CSS属性及方法

jQuery—$工具方法&属性&CSS

0 条评论