jQuery的基本操作

思维导图

基本选择器 

             

   //$("#xx").css("background","yellow");//id选择武器
                // $(".yy").css({"background":"yellow","color":"red"});//类选择器
                // $("div").css("backgroud","pink");//标签选择器=元素选择器
                // $("*").css("backgroud","pink");//通配符：全部
                 // $("p,span").css("background","yellow");//并集
                // $("div>span").css("background","yellow");//交集 后代span
                // $("div>span").css("background","yellow");//父子关系
                //$("p+sapan").css("background","yellow");//兄弟关系

 过滤器:
       

        // $("ul>li:first").css("background","yellow");//第一个
                // $("ul>li:last").css("background","yellow");//最后一个
                // $("ul>li:even").css("background","yellow");//偶数下标
                // $("ul>li:odd").css("background","yellow");//奇数下标
                // $("ul>li:gt(0)").css("background","yellow");//大于0
                // $("ul>li:lt(4)").css("background","yellow");小于4

js与jQuery的区别

js :

<!-- 原生态JavaScript实现点击弹窗 -->
		<script type="text/javascript">
			// 加载函数
			// 1.window.onload = function(){}   1次
			// 2.window.addEventLinstener('load',function(){});  多次

			window.onload = function() {
				// 获取按钮
				var btn = document.getElementById('btn1');
				// 设置按钮的事件
				btn.onclick = function() {
					alert(123)
				}
			};
		</script>

jQuery :(需要引用外部式文件)

<script type="text/javascript">
			// 加载函数
			// 1.标准写法 $(document).ready(function(){});
			// 2.简写写法 $(function(){})

			jQuery(function() {
				// 获取按钮设置点击事件弹窗
				// 这种编写代码的方式称为"链式写法"
				$("#btn2").click(function() {
					alert(123)
				});
			});
		</script>

 <!-- jQuery的文件的结构 -->

<script type="text/javascript">
			// 1.打开jQuery库查看后  有一个基本架构
			/*
				(function(){
					
				}())
				上述这种结构称为自执行函数结构，作用就是自己定义调用自己自动执行
			*/

			// 函数
			function add() {
				alert(123)
			}
			// 手动调用
			// add();

			// 自执行函数的定义
			// 闭合函数
			(function() {
				// alert('自执行函数');

			}())

			// $ 和$()的作用
			// $这个符号是在jQuery库中定义  属于jQuery
			// $有点类似原生态js的window对象
			// 在jQuery中，$作为了window对象中的一个属性（对象属性，对象函数）
			console.log(window);
			// window.jQuery = window.$ = jQuery;
			// $等价于jQuery


			// Person.add();  new Person().add();
			// $  有点类似Java的类  each  isFunction
			// $()  相当于类的构造方法

			console.log($.type($));
			// 判断$的类型
			console.log(Object.prototype.toString.call($));

			// $()  括号中可以根据需求传入指定的参数
			// 根据参数不同，意思不同
			// 1.参数为匿名函数时，意思：加载函数 $(function(){});
			// 2.参数为字符串时，有两层意思
			// 2.1 获取页面元素（选择器） $("#id")  $(".class")
			// 2.2 创建标签  $("<a></a>");
			// 3.参数为DOM对象（js对象） 意思：转换
			// 明天  js对象《---》jQuery对象
			var b1 = document.getElementById('btn1');
			var $b1 = $("#btn1");
			// console.log(b1 == $b1); //false
		</script>