jQuery:
jQuery是一个js库免费开源易用,提供了我们开发中常用到的操作DOM的API,解决了我们使用js操作DOM常遇到的一些问题,强大的选择器,简化我们的操作。
jQuery的特点:
a. 轻量级b. 富应用c. DOM操作、事件处理、运动动画、AJAXd. 跨浏览器(不再考虑浏览器兼容)e. 链式调用f. 隐式迭代g. 丰富的插件库 。
jQuery基本使用:
官网下载: https://code.jquery.com/主版本号3是不兼容ie9之前的浏览器主版本号1是兼容所有浏览器。
引入jQuery:
路径引入 <script src='文件路径'></script> 引入在线资源 <script src = "https://code.jquery.com/jquery-1.12.4.js"></script>
入口函数:
$(document).ready(function(){
//类似于原生js的window.onload
}); 【简写为:$(function(){ });】
和window.onload的区别:
区别一:书写个数不同
【Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。 jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。】
区别二:执行时机不同
【Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。 jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。】
DOM对象和jQuery对象:
jQuery对象: jQuery选择器拿到DOM对象后又对其做了封装,让其具有了jQuery方法的jQuery对象,说白了,就是把DOM对 象重新包装了一下。
jQuery对象转换为DOM对象:
第一种方式:var btn1 = $btn[0];
【此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)第二种方式】
var btn2 = $btn.get(0);【此时就把jQuery对象$btn转换成了DOM对象btn2】
DOM对象转换为jQuery:
使用$(domObject)包裹就可以包装成一个jQuery对象
jQuery选择器:
基本选择器:"#"【Id选择器】
例如:$(“#btnShow”).css(“color”, “red”);选择id为btnShow的一个元素(返回值为jQuery对象)
"." 【类选择器】
例如:(“.liItem”).css(“color”, “red”);选择含有类liItem的所有元素
"element"【标签选择器】
例如:$(“li”).css(“color”, “red”);选择标签名为li的所有元素
"空格"【层级选择器(后代选择器)】
例如:$(“#j_wrap li”).css(“color”, “red”);选择id为j_wrap的元素的所有后代元素li
">"【子代选择器】
例如:$(“#j_wrap > ul > li”).css(“color”, “red”);选择id为j_wrap的元素的所有子元素ul的所有子元素li