Jquery（第一章笔记）

什么是Jquery

jQuery的本质就是JavaScript
只是将JavaScript的某些方法封装成一个库，
极大简化了原生JavaScript开发。
潜台词：JS怎么用，Jquery就怎么用，只是把JS的代码简化了

什么是库? lib

“库”--->（library--文库，图书馆）-->  将一些相关函数方法进行封装以便使用。
                类似于jar包。

Jquery的优势

1.轻量级，jquery库的大小仅仅几十kb
2.强大的选择器
                （用更精简的代码即可获取指定的html元素，
                摈弃了之前通过document.getElement等方法，并支持批量操作元素）
3.浏览器的兼容性，能兼容大部分市面上的浏览器
4.等等...    

jQuery的版本

主要分为1.x.x   2.x.x   3.x.x
                jQuery的三个版本功能几乎相同，主要是浏览器的兼容性不同，
                随着版本的升高，jQuery逐步放弃了对老旧浏览器的兼容

如何使用jQuery

就理解为 引入的一个外部的JS  这个外部的JS就是Jquery
            如下：
            <script src="xxx" ></script>
            然后再另外的script标签中就可以既使用JS代码 也可以使用Jquery代码

如何引用

1.下载jquery的js文件  但是Hbuiler内置了如何操作：
                    A.选中js文件夹
                    B.右键创建一个js文件
                    C.在下方选中jquery1.x  然后重命名即可
                    D.不要去动里面的代码
            
                2.在script标签中引入刚刚下载的jquery文件
                    <script src="js/jquery.js"></script>
                
                3.设置语法提示库
                    右下角  选择jquery  xxx
   
                4.测试
                通过alert($) ;  如何正确弹窗就说明OK了 反之失败 

                凡是在控制台看到了这一行代码：$ is not defined
                就表示Jquery没有引入成功

Jquery的压缩版

在开发中：会经常看见xxxx.min.xx格式的文件
                
                    看到了这个min就理解为压缩版即可。
                    就是去除了空格、换行、注释等，让占据空间变小而已。  
                    没有min关键字的就是未压缩版
                    了解即可。
压缩版理解为 上线版   项目都上线了，希望项目的体积越小。
未压缩版理解为 开发版  项目还没有上线，我随时需要对代码进行修改

初学者学习Jquery的注意事项（常犯错误）

1.引入js的路径有问题或忘记引入jquery
2.顺序问题,要先引入jquery  再写相关的代码  script的顺序问题
3.不要在引入的jquery的script标签内部写代码

Jquery的代码简化

分别用JS和Jquery来将页面中的h1标签的内容 修改为 你好 
JS实现
         document.getElementsByTagName("h1")[0].innerText = "你好";
jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
         $("h1").text("你好");

Jquery批量操作元素

<h1>hello js</h1>
		<h1>hello js</h1>
		<h1>hello js</h1>
		<h1>hello js</h1>
		<h1>hello js</h1>
		<h1>hello js</h1>
		
		<script src="js/jquery.js">
		</script>
		
		<script>
			//魔力2---批量操作元素的简化
			
			//分别用JS和Jquery来将页面中所有的h1标签的内容 修改为 你好 
			 
			//JS实现
			// var h1 = document.getElementsByTagName("h1");
			
			// for (let i = 0; i < h1.length; i++) {
			// 	h1[i].innerText = "你好";
			// }
			
			
			//jquery实现   暂时先将$("h1") 理解为 获取所有的h1标签
			$("h1").text("你好");

Jquery的常见方法

Jquery中常见方法如下:
      val()   text()   html()     css()  attr()     prop()

<input type="text" id="a1"  value="123" />
		
		<h3>这是一个h3标签</h3>
		
		
		
		<p style="color: red;">这是p标签</p>
		
		
		
		<button>按钮</button>
		
		
		<script src="js/jquery.js"></script>
		<script>
			暂时先将$("xx") 理解为是获取xx元素  且暂时理解为它是jquery对象
			暂时将 document.getElementByXxx 理解为JS对象
			注意: js对象无法使用Juqery的相关用法  Juqery对象也无法使用JS的相关用法
            

           
        将input组件的值修改
			// document.getElementById("a1").value = "你好";
			// $("input").val("鸟");
			
			//注意事项:  js的value是属性 jquery的val是方法
			
			//val使用场景:只能修改表单元素 且拥有value值的组件
			//例如文本框密码框  但是像h1标签 span标签就无法使用该方法
			
			//val的2种用法:
			//1.取值:
			// var str = $("input").val();
			// alert(str);
			//2.赋值
			// $("input").val("~~~");
			
			
			//注意事项:  js的innerText是属性 jquery的text是方法
			
			//text使用场景:只能修改非表单元素  
			//例如h1标签 span标签  但是像文本框密码框就无法使用该方法
			
			//text的2种用法:
			//1.取值:
			// var str = $("h3").text();
			// alert(str);
			//2.赋值
			// $("h3").text("!!!");
			
			
			//注意事项:  js的innerHtml是属性 jquery的html是方法
			
			//html使用场景:只能修改非表单元素  
			//例如h1标签 span标签  但是像文本框密码框就无法使用该方法
			
			//html和text的区别是:前者会将html标签识别  后者只会解析成文本
			
			//html的2种用法:
			//1.取值:
			// var str = $("h3").html();
			// alert(str);
			//2.赋值
			// $("h3").html("!!!");
			
			
			
			//注意事项:  js的style.xxx是属性 jquery的css是方法
			
			//css使用场景:修改或获取HTML元素的CSS的样式  
			
			
			//css的2种用法:
			//1.取值:
			// var str = $("p").css("color");
			// alert(str);
			// 2.赋值
			// $("p").css("color" , "yellow");
			
			
			
			
			//attr使用场景:修改或获取HTML元素的属性 该属性的值 不为true或false
			//常见的属性A类(等于一个具体的值):id   class   name    type      src   href   
			
			//attr的2种用法:
			//1.取值:
			// var str = $("input").attr("id");
			// alert(str);
			// 2.赋值
			// $("input").attr("id" , "aaa");
			
			// $("button").attr("disabled","disabled");//没问题
			//但是你会发现 无法通过attr将其修改为 可以使用
			
			//prop使用场景:修改或获取HTML元素的属性 该属性的值 为true或false
			//常见的属性B类(等于一个true或false):disable  readonly     checked
			// var str = $("button").prop("disabled");
			// alert(str);
			
			$("button").prop("disabled",false);

文档就绪函数

<script src="js/jquery.js">
        </script>
        <script>
          了解即可  只要你保证你的js代码 放在HTML最下方  就可以不用写它
         文档就绪函数意义:  将HTML加载完毕之后 再执行
         $(function(){
               代码~~
            });
           看到上面的代码 就需要知道 他是文档就绪函数

Js对象和jquery对象的讲解

jquery对象：
          $(“xxx”)函数会返回一个对象，这个对象被称为jQuery对象。
          例如刚刚所学习的css(),html()等都是jQuery对象的专属方法。

dom对象：就是JS通过document对象获取的对象
            例如document.getElementById();

js对象无法使用Juqery的相关用法  Juqery对象也无法使用JS的相关用法

js对象和jquery对象的区别

下表列出了dom对象和jQuery对象进行一些操作的对比
            1.原生JavaScript都是通过更改属性来实现
            2.jQuery对象都是通过调用方法来实现
            3.JavaScript是单独操作--如需批量操作需要借助for循环
            4.jQuery是批量操作--如需单独设置，就确保其只有一个元素

jquery对象的别名

<script src="js/jquery.js"></script>
		
		<script>
			jqury对象的名字是: $  
			jqury对象的名字是: jQuery
			alert($==jQuery);//true
			
			$("aa");
			jQuery("aa");
			//上述两行代码的意义一样,都表示获取aa元素