JQUERY的基本概念

Posted 2020-10-06

JQuery 语法： 

* 1、使用JQuery必须先导入一个JQuery.x.x.x.js文件；
*
* 2、JQuery中的选择器：
* $("选择器").函数();
* ① $是JQuery的缩写，即可以使用jQuery("选择器").函数();
* ② 选择器，可以是任何设为CSS文件支持的选择符；
* 3、文档就绪函数，防止在文档未完全加载完成之前，运行JQuery代码；
* $(document).ready(function(){
*
* //JS代码 ；
*
* })
* 简写形式：$(function(){ });
*
* 文档就绪函数与window.onload区别
* ① window.onload必须等到网页中的所有内容加载完成后，才会执行代码(包括图片、视频等资源)；
* 文档就绪函数，只需要在网页中的DOM结构加载完毕就会执行；
* ② window.onload只能写一个，写多个只会执行最后一个；
* 文档就绪函数，可以写多个，并且不会被覆盖。
* 4、原生JS对象与JQuery对象：
* ①只能调用JQuery函数，只能调用JQuery的函数，而不能使用元素JS的事件与函数；
* $("#p").click(); √
* $("#p").onclick() = function(){} ; x
* 解释： $("#p")是JQuery对象， onclick是原生JS事件
*
* 同理，使用document.getElement系列获取的是原生的JS对象，也不能使用JQuery相关函数。
* ②原生JS对象转为JQuery对象
* 可以使用$符包裹原生JS对象，即可转为JQuery对象；
* eg： var p = document.getElementsByTagName("p");
* $(p).click(); √ 原生JS的对象p已经转为JQuery对象；
*
* ③JQuery对象 转为 原生JS对象。使用.get(index) 或 [index]
* $("#p").get(0).onclick = function(){} √ ；
* $("#p").[0].onclick = function(){} √ ；
*
* 5、JQuery 解决多库冲突
* 由于其它的JS库，也可能使用$作为自身标识，导致其它JS库与JQuery冲突；
*
* 要解决冲突，可以使用$，直接使用JQuery对象。
* [使用自执行函数传入jQuery对像简化写法]
*
* jQuery.noConflict();//调用这个函数，将$控制权让渡给其它类库，即JQuery
*
*
*
* !function(j){
* //函数中，就可以用字母J，代替JQuery对象
* }(jQuery);
*