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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值