jQuery_02($工具及CSS样式)

阿菜酱

已于 2022-03-11 13:33:17 修改

阅读量172

点赞数 1

文章标签： jquery css javascript

于 2022-03-11 13:31:35 首次发布

本文链接：https://blog.csdn.net/m0_65208075/article/details/123422315

版权

一：$是什么？？？

是一个函数，来源于jQuery库中
window.jQuery = window.$ = jQuery;（$ jQuery是等价的）
把jQuery和$作为了window的一个属性

2.jQuery文件结构

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

3.js中的dom对象与jQuery对象的互换

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

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


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

5.Query属性

1.attr()：获取某个标签属性的值，或设置某个标签属性的值
2.removeAttr()：删除某个标签属性
3.addClass()：给某个标签添加class属性值
4.removeClass():删除某个标签class属性值
5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
8.val()：主要用户获取/设置输入框的值

<!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 >
	
	</body>
</html>

6.全选以及取消全选

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

7.CSS
1.css()：设置标签的css样式
获取样式值：css("样式名")
设置单个样式：css("样式名","样式值")
设置多个样式：css({"样式名"："样式值"，"样式名"："样式值"})
2.位置
offset()：相对整个大容器的相对位置
position()：相对父容器的相对位置
scrollTop()：滚动条到顶部距离
3.尺寸
内容尺寸
width():容器宽
height():容器高
内部尺寸
innerWidth()：width+padding
innerHeight()：height+padding
外部尺寸
outerWidth():width+padding+border
outerHeight():height+padding+border

注意：参数为true，再加上margin
width():容器宽
height():容器高
innerWidth()：width+padding
innerHeight()：height+padding
outerWidth():width+padding+border
outerHeight():height+padding+border
演示以上内容

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

            .box {
                position: relative;
                width: 50px;
                height: 50px;
                background-color: palegreen;
                left: 20px;
                top: 20px;
            }
        </style>
        <!-- jQuery库 -->
        <script src="js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <script type="text/javascript">
            for (var i = 1; i < 2000; i++) {
                document.write("<br />")
            }
        </script>
        <div id="odiv">
            <div class="obox">
            </div>
        </div>
        <script type="text/javascript">
            var $odiv = $("#odiv");
            console.log($odiv.offset().left);
            console.log($odiv.offset().top);
            var $obox = $("#obox");
            console.log($obox.position().left);
            console.log($obox.position().top);

            window.onsroll = function() {
                console.log("滚动中...");
            }

            $(window).scroll(function() {
                console.log($(this).scrollTop())
            })

            console.log($odiv.width());
            // width+padding
            console.log($odiv.innerWidth());
            // width+padding+border
            console.log($odiv.outWidth());
        </script>
    </body>
</html>

8.思维导图

阿菜酱

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery_02($工具及CSS样式)

一：$是什么？？？是一个函数，来源于jQuery库中window.jQuery = window.$ = jQuery;（$ jQuery是等价的）把jQuery和$作为了window的一个属性2.jQuery文件结构其实时一个自执行函数(function(){ window.jQuery = window.$ = jQuery}());3.js中的dom对象与jQuery对象的互换<!DOCTYPE html><html>...
复制链接

扫一扫