JQuery 初次体验

JavaScript 与 JQuery的关系

jQuery是JavaScript库中的一种,JavaScript库也可以叫JavaScript函数库
封装了很多js代码的一个js文件就是一个库。 Prototype、YUI(网络反响一般)、Dojo、ExtJS、jQuery等都是JS库

jQuery 优点

写的少做的多,体积小,功能强大,链式编程,隐式迭代.插件丰富,开源,免费,兼容性强

引入 jQuery 文件

jquery-1.12.1.js      //正常的代码文件
jquery-1.12.1.min.js  //压缩的代码文件，上线的时候使用压缩的

//线上CDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

JQuery中的顶级对象

JQuery -- 可以用$符号来代替
JQuery 的JS文件中的所有的东西都是jQuery或者都是$符号下的

如果想要使用jQuery中的属性或者方法,那么需要 jQuery.属性、jQuery.xxx() 来使用
简单的写法: $.属性 $.方法
大多数情况下,jQuery中几乎都是方法,属性很少
JQuery中几乎把DOM中的事件都封装成了一个方法,在jQuery中几乎是把on去掉,然后变成方法了

//jQuery中注册事件
$("选择器").click(匿名函数);

//DOM中注册事件
document.getElementById("id属性值").onclick=匿名函数;

浏览器中的顶级对象:window,浏览器中和页面中所有的东西都是window的
页面中的顶级对象:document,页面中某些东西是document

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号时，会出现变量冲突的情况，解决方法:
使用 JQuery 变量来继续使用
重置变量 jQuery.noConflict() 的方法来解决变量冲突。帮助您使用自己的名称（比如使用_代替 $ 符号）

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<p>这是一个段落。</p>
<button>测试 jQuery</button>

<script>

  //方法1:使用 
  var $ = 10; //$被占有，可以使用JQuery来继续使用
  JQuery(function () {
    JQuery("#btn").click(function () {
      console.log("一缕清风")
    })
  })
  
  //方法2:使用 noConflict
  var _ = jQuery.noConflict();
  _(document).ready(function () {
    _("button").click(function () {
      _("p").text("jQuery 名称冲突！");
    });
  });
</script>

插件封装格式

$.fn.名字=function(){}

增强JQuery的功能

$.fn.extend(object)

增强通过Jquery获取的对象的功能

$.extend(object)

增强JQeury对象自身的功能

jquery加载

JS DOM中页面加载事件

window.onload = function () {
  console.log("好帅");
};

window.onload = function () {
  console.log("哈哈,我又变帅了");
};

/* 
哈哈,我又变帅了
*/

⚠️注意: 页面全部加载完毕才触发(标签,文字,图片,引入的文件)

JQuery中页面加载的事件

// 方法1
$(window).load(function () {
  console.log("第1种页面加载的事件");
});

// 方法2
// 这种采用的事件比方法1快，页面中的基本的元素加载后就触发
$(document).ready(function () {
  console.log("第2种页面加载的事件");
});

// 方法3
// 页面中基本的元素加载后就触发了
jQuery(function () {
  console.log("第3种页面加载的事件");
});

//简写
$(function(){ })

window.onload 和 $(function) 区别

window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
$(function) 可以定义多次的

jQuery对象和DOM对象互转的问题

jq -> js
jq对象[索引] 或者 jq对象.get(索引)

js -> jq
$(js对象)



<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.1/jquery.js"></script>
<button id="btn">按钮</button>
<script>
  var btn = document.getElementById("btn");
  // DOM对象转jQuery对象
  $(btn).click(function () {
    alert("JQ注册点击事件");
  });
  // //错误的
  // btn.click(function () {
  //   alert("哈哈,小苏太帅了");
  // });


  //jQuery对象转DOM对象
  var btn2 = $("#btn");
  btn2[0].onclick = function () {
    alert("哈哈,我又变帅了");
  };
  // //错误的
  // btn2.onclick = function () {
  //   console.log("助教比小杨帅");
  // };
</script>

为什么要把DOM对象转jQuery对象,为什么又把jQuery对象转DOM对象?

DOM操作很麻烦(兼容,一个功能写好多代码) -> 转jQuery对象,操作简单(使用jQuery中的方法或属性),不需要写兼容，
jQuery操作中有一些兼容没封装在jQuery中,转DOM对象,通过原生的js代码实现功能,如果后面都解决了,又想简单的写代码操作内容,再转回jQuery对象 ⚠️注意: DOM对象调用jQuery的方法不能实现,必须是jQuery对象调用jQuery的方法

开关灯案例

DOM版本

<input type="button" id="btn" value="开灯">
<style>.cls{background-color: black;}</style>
<script>
  document.getElementById("btn").onclick = function () {
    var body = document.body;
    if (body.className == "cls") {
      body.className = "";
      this.value = "关灯";
    } else {
      body.className = "cls";
      this.value = "开灯";
    }
  };
</script>

JQ版本

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

<input type="button" id="btn" value="开灯">
<style>
  .cls { background-color: black; }
</style>
<script>

  //方法1 
  // $("#btn").click(function () {
  //   if ($(this).val() == "开灯") {
  //     $("body").css("background-color", "black");
  //     $(this).val("关灯");
  //   } else {
  //     $("body").css("background-color", "gray");
  //     $(this).val("开灯");
  //   }
  // })

  //方法2
  $("#btn").click(function () {
    $("body").hasClass("cls") ? $(this).val("开灯") : $(this).val("关灯")
    $("body").hasClass("cls") ? $("body").removeClass("cls") : $("body").addClass("cls")
  });
</script>