文章目录
1.为什么要使用JQuery1.简化JavaScript的开发2.开源的免费的3.使用模块化的使用方法4.时间成本5.健壮性
2.如何使用JQuery第一步 是在头部引用包第二步：直接用将DOM对象直接包裹成jQuery对象1.第一种直接将一个DOM作为参数传递给$()2.第二种是传递选择器的参数给$（）3.我们发现这个$实际上是一个函数，然后我们看这里的注释，说这个jQuery对象实际上是一个强大的初始化构造函数。4.如果这个jQuery数组对象中含有多个DOM元素怎么办呢？读取数组啊：
1.根据Don方式查找2.根据CSS查找3.使用jQuery
1.为什么要使用JQuery
1.简化JavaScript的开发
2.开源的免费的
3.使用模块化的使用方法
4.时间成本
5.健壮性
2.如何使用JQuery
第一步 是在头部引用包
第二步：直接用
js :
window.onload=function();
jq:
$(window).load(function(){
$("#parent").append("<span>Hello World!!</span>");//补全选择代码
});
将DOM对象直接包裹成jQuery对象
1.第一种直接将一个DOM作为参数传递给$()
$(window) 这样函数$()会将window对象包装成一个jQuery对象然后返回。
2.第二种是传递选择器的参数给$（）
$('#ID名字') 这样函数$()首先会根据传入的字符串参数去DOM树中找到这个这一些对象，然后将其包装成jQuery对象
3.我们发现这个$实际上是一个函数，然后我们看这里的注释，说这个jQuery对象实际上是一个强大的初始化构造函数。
$就是JQuery
4.如果这个jQuery数组对象中含有多个DOM元素怎么办呢？读取数组啊：
var lis = $(".list");
var origDOM = [];
for(var i = 0; i < lis.length; i++) {
origDOM[i] = lis[i];
}
将jQuery当成一个数组读取，就能获取原始的DOM对象。
1.根据Don方式查找
getElementById
getElementsByTagName
getElementsByClassName
// 变量声明
var parEl, trEls, listEls;
$(window).load(function(){
// 获取 id 为 parent 的 div 元素（补全此处1）
parEl = document.getElementById("parent");
// 获取所有 tr 标签元素（补全此处2）
trEls = document.getElementsByTagName("tr");
// 获取所有 class 为 list 的元素（补全此处3）
listEls =document.getElementsByClassName("list");
console.log(parEl.nodeName + "+" + trEls.length + "+" + listEls.length);
});
2.根据CSS查找
querySelector
querySelectorAll
// 变量声明
var parEl, trEls, listEls;
$(window).load(function(){
// 获取 id 为 parent 的 div 元素
parEl = document.querySelector('#parent');
// 获取所有 tr 标签元素
trEls = document.querySelectorAll('tr');
// 获取所有 class 为 list 的元素
listEls = document.querySelectorAll('.list');
//控制台打印获取信息
console.log(parEl.nodeName + "+" + trEls.length + "+" + listEls.length);
});
3.使用jQuery
// 获取 id 为 parent 的 div 元素
parEl = $('#parent');
// 获取所有 tr 标签元素
trEls = $('tr');
// 获取所有 class 为 list 的元素
listEls = $('.list');
// 变量声明
var parEl, trEls, listEls;
$(window).load(function() {
// 获取 id 为 parent 的 div 元素
parEl = $('#parent');
// 获取所有 tr 标签元素
trEls = $('tr');
// 获取所有 class 为 list 的元素
listEls = $('.list');
//
console.log(parEl[0].tagName + "+" + trEls.length + "+" +listEls.length);
});
jQuery选择器返回的是jQuery对象，document.querySelector和document.querySelectorAll返回的是DOM对象。
