$工具方法及jQuery属性和CSS-CFANZ编程社区

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

五、表格隔行换颜色

六、全选以及取消全选

css代码测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#odiv{
				width: 100px;
				height: 100px;
				background-color: #00FFFF;
				position: absolute;
				left: 200px;
				top:100px;
				border: 10px solid khaki;
			}
			.box{
				position: relative;
				width: 50px;
				height: 50px;
				background-color: #FAEBD7;
				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>