什么是jQuery?
- jQuery的官网 http://jquery.com/
- jQuery就是一个js库,使用jQuery的话,会比使用JavaScript更简单。
- js库:把一些常用到的方法写到一个单独的js文件,使用的时候直接去引用这js文件就可以了。
总结: 我们知道了,jQuery其实就是一个js文件,里面封装了一大堆的方法方便我们的开发,其实就是一个加强版的common.js,因此我们学习jQuery,其实就是学习jQuery这个js文件中封装的一大堆方法。
jQuery入口函
//第一种写法$(function() { });
//第二种写法$(document).ready(function() { });
jQuery入口函数与js入口函数的对比:
- JavaScript的入口函数要等到页面中所有资源(包括图片、文件)加载完成才开始执行。
- jQuery的入口函数只会等待文档树加载完成就开始执行,并不会等待图片、文件的加载。
jQuery 选择器
1.jQuery 选择器允许对 HTML 元素组或单个元素进行操作。
2.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。
元素选择器:
$('*') //获取所有元素
$(this) //获取当前元素 ---- 点前面那个就是了
$('li .children') // li 里面拥有的.children的类名
$('ul:first') // 选取第一个ul元素 元素下标是从0开始
$('ul li:first') // 选取ul的儿子li的第一个元素
$('ul li:first-child') // 选取ul下的li的 每 一个第一个元素
$("[href]") //选取带有 href 属性的元素
$("li:even")//选取偶数位置的 <tr> 元素
$("li:odd")//选取奇数位置的 <tr> 元素
语法 | 描述 |
---|---|
$(this) | 获取当前元素 ---- 点前面那个就是了 |
$(‘li .children’) | li 里面拥有的.children的类名 |
$(‘ul li:first’) | 选取ul的儿子li的第一个元素 |
$(‘ul:first’) | 选取第一个ul元素 元素下标是从0开始 |
$(‘ul li:first-child’).css(‘color’,‘red’) | 选取ul下的li的每一个第一个元素 |
$("[href]") | 选取带有 href 属性的元素 |
$(“li:even”) | 选取偶数位置的 |
$(“li:odd”) | 选取奇数位置的 |
$(’*’) | 获取所有元素 |
jQuery的基本效果
使用jQuery的基本效果:
语法 | 描述 |
---|---|
Show() | 把隐藏的显示 |
Hide() | 把显示的隐藏 |
Toggle() | 切换显示和隐藏 |
slideUp() | 上滑 |
slideDown() | 下滑 |
slideToggle() | 切换滑动 |
<style>
#box{
width: 200px;
height: 200px;
background-color: hotpink;
display: none;
}
</style>
<p>
<button id="xs">显示</button>
<button id="yc">隐藏</button>
<button id="qh">切换</button>
<button id="xh">下滑</button>
<button id="sh">上滑</button>
<button id="qhh">切换滑</button>
</p>
<div id="box"></div>
$(function () {
$("#xs").click(function () {
$("#box").show(1000);//显示对角线动画
});
$("#yc").click(function () {
$("#box").hide(1000);//隐藏对角线动画
});
$("#qh").click(function () {
$("#box").toggle(1000);//切换对角线动画
});
$("#xh").click(function () {
$("#box").slideDown(1500);//下滑动画
});
$("#sh").click(function () {
$("#box").slideUp(1500);//上滑动画,先显示再上滑
});
$("#qhh").click(function () {
$("#box").slideToggle(1500);//切换滑动
});
});
jQuery对象转换成DOM对象
- DOM对象:使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
- jQuery对象:jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
- jQuery对象其实就是DOM对象的包装集(包装了DOM对象的集合(伪数组))
- DOM对象与jQuery对象的方法不能混用。
DOM对象原声JS获取元素的的写法:
//原声JS获取元素的的写法
window.onload = function () {
var demo = document.getElementById("dem o");
alert(demo.innerHTML);
}
jQuery对象转换成DOM对象:【用[0]或者get(0)来转换】(面试题)
//alert($("#demo").html());这个是JQ获取文字内容的写法
//alert($("#demo").innerHTML);这样不对,因为innerHTML是DOM对象
// alert($("#demo")[0].innerHTML);这样就把JQ对象转换为了DOM对象,[0]就可以
alert($("#demo").get(0).innerHTML);//这样也可以,JQ对象转换为了DOM对象,利用get方法也可以转换。get(0)