一、jQuery基础概念

学习资料网站 https://www.jb51.net/zt/jquerydown.htm

一、jQuery基础

1.1 jQuery是什么


	+++ jQuery是什么
			1) 一个优秀的JS函数库( 口号: Write Less,Do More !!!)
			2) 封装简化DOM的增删改操作

		
	+++ 区别jQuery的不同版本
			
			1.x  兼容老版本IE
				 文件更大
			
			2.x  仅支持IE8以上浏览器
				 文件小,执行效率高
			
			3.x  提供一些新的API	 


1.2 jQuery的作用(为什么要用jQuery)

	
		
	jQuery封装了许多简化DOM的操作。	
			
				1) 强大的选择器。方便快速查找DOM元素
				
				2) 隐式迭代:可以一次操作多个元素
								比如 $obj.click 可以一次绑定给多个匹配的DOM元素
										
				3) 读写合一:读数据、写数据用的是一个方法
								比如 $obj.html() 既可以读数据又可以写数据
								
				4) 事件处理		
												
				5) 链式调用
						  可以通过.来调用jQuery对象的方法。
						  原理:jQuery对象的方法内部都返回了this
						  
				6) DOM操作
				7) 样式操作				
				8) 浏览器兼容
						 jQ内部兼容浏览器,我们只要使用jQ的语法。
								 

1.3 jQuery使用方式(怎么用jQuery)

1)引入jQuery库

	1、本地引入					
		    <script type="text/javascript"   src="js/jquery-1.12.4.js"></script>
		    
			官网下载:https://jquery.com/
			其他下载:https://www.jb51.net/zt/jquerydown.htm

	2CDN远程引入					
			<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.slim.js"></script>
			
			CDN远程库: https://www.bootcdn.cn /  


2)使用jQuery
	
	1、使用jQuery核心函数:$/jQuery
	2、使用jQuery实例对象:$xxx 
				($xxx实例对象是执行$(..)函数得到的jQuery实例对象)
				
>>>>>> 案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <script>


        //使用原生DOM实现
        function f1(){
                var aIn=document.getElementsByTagName("input")[0];
                alert(aIn.value);
        }

     
    </script>


    <script type="text/javascript"   src="js/jquery-1.12.4.js"></script>
    <script>
        //jQuery
        $(function(){
            $("#b1").click(function(){
                    alert($("#userName").val())
            })
        })
    </script>
</head>
<body>


    用户名:<input type="text" id="userName"> <button onclick="f1()">原生</button> <button  id="b1">jQuery</button>
    
</body>
</html>

一、jQuery基础概念_第1张图片

你可能感兴趣的:(WEB基础-jQuery,jquery,javascript,ajax)