jQuery是一种轻量级的,功能多样的,快速的JavaScript库。它使HTML文档遍历和操作(POM),事件处理,动画,还有Ajax用一个简单易用API接口来跨多个浏览器使用。jQuery结合了通用性和可扩展性来改变了数百万计的人写JavaScript代码的方式。
一、入口函数
jQuery入口函数的两种写法:
其中第一种只需能看懂即可,用的不多
1 $(document).ready(function () { 2 console.log("这是jQuery入口函数的第一种写法"); 3 }); 4 5 6 =============================== 7 8 9 $(function() { 10 console.log("这是jQuery入口函数的第二种方法"); 11 });
开发用版本 .min.js
学习用版本 .js
js的入口函数比jQuery的入口函数执行得晚一些,并且jQuery的入口函数不等页面的图片加载,但是这两种的入口函数都等待文档的加载。
jQuery推荐使用步骤:
- 引入jQuery库
- 入口函数
- 功能实现
写入口函数的好处是使代码更加灵活,可以放在HTML页面的任何位置。
二、jQuery对象与DOM对象(js对象)的区别
DOM对象:使用js的方式获取到的元素就是js对象
var cloth = document.getElementById("cloth");
cloth.style.backgroundColor = "pink";
jQ对象:使用jQ方式获取到的元素就是jQ对象
var $li = $(li); $li.text("xxx");
区别:
-
- js对象和jQuery对象的方法不能混用
- 他们不是一个对象
联系:
jq对象其实就是js对象的集合,伪数组jQuery.fn.init[ x ],里面存放了一大堆的js对象。它有自己的方法。
jQuery对象转换为DOM对象:
如果想用jQuery对象调用js对象的方法,可以从伪数组中取出来DOM对象,这样就可以调用了。
$li[0] / $li.get(0)
DOM对象转换为jQuery对象:
如果想用js对象调用jQuery对象的方法,就花钱买(在DOM对象前加$)
var cloth = document.getElementById("cloth");
$(cloth).text("xxx");
三、$符号的实质
$其实是一种函数,用的时候记得加()。
三种用法:
- 参数是一个function,那就是一个入口函数
- 把dom对象转换为jQuery对象,$(domobj)
- 参数是一个字符串
- $("div") 标签选择器 $("#btn") id选择器 $(".current") 类选择器
四、基本选择器
jQuery的选择器返回的是jQuery对象,并提供一组方法,可以让我们更方便的找到页面种的元素。
jQuery提供很多种选择器,但是虽然很多,选择器之间可以相互替代,所以我们平时真正用到的只是少数的最常用的选择器。
<script> $(function(){ $("#four").css("backgroundColor", "red"); }); $(".green").css("backgroundColor", "green"); $("li").css("color", "blue");
// 并集
$("#four, .green").css("backgroundColor", "pink"); </script>
五、层级/过滤选择器
- 子代选择器:$("ul > li") ,不会获取到孙子层级的元素
- 后代选择器:$("ul li"),使用空格,代表后代选择器,包括孙子等层级。
- :even
- :odd
- :lt ()
- :gt()
- :eq()
- :first
- :second