JavaScript框架简介
jQuery的优势
轻量级 (Lightweight)
强大的选择器
出色的DOM操作封装
可靠的事件处理机制
出色的浏览器兼容性
jQuery 理念: 写得少, 做得多
jQuery的使用
下载:http://jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包(Minified)即可。目前最新的版本jquery-1.12.3.min.js文件只有55.9 KB
引用:
将jQuery框架文件导入后,就可以使用jQuery的选择器和各种函数功能了。
第一个jQuery程序
* document是dom对象,$(dom)把dom对象包起来变成jquery对象
* 调用jquery的ready()方法,该方法是文档加载完成后调用
* 接收一个回调函数参数,类似dom时间中的onload方法
* 监听类似于多个线程在监听,谁先调用未知
jQuery 对象
jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象
jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html();
jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法
【编程习惯】建议约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
var $variable = jQuery 对象
var variable = DOM 对象
jQuery 对象转成 DOM 对象
jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法:
(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.
$("#msg")[0]
(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象
$("#msg").get(0)
DOM 对象转成 jQuery 对象
对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如:
$(document.getElementById(“msg”))
转换后就可以使用 jQuery 中的方法了
jQuery对象与dom对象的转换举例
以下几种写法都是正确的:$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用jQuery的方法
jQuery的选择器
基本选择器
基本选择器示例(修改样式)
可以放入多个dom对象
一个参数获取属性值 两个参数设置属性值
通过id选择器调用可以设置多个选择器用,隔开。 放入数组中 jquery设置样式不需要加px
注意驼峰命名
/*************基本标签*****************************************/
//一个参数获取属性值 两个参数设置属性值
//通过id选择器调用可以设置多个选择器用,隔开。 放入数组中 jquery设置样式不需要加px
$("#nav").css("width", 300)
.css("height", 300)
.css("background-color", "#ccc");
$("#nav,#nav2").css({
width: 500,
height: 500,
backgroundColor: "red" //注意驼峰命名
});
//通过标签选择器 自动循环赋值
$("li").css({
color: "blue"
});
//相当于
var lis = document.getElementsByTagName("li");
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = "pink";
}
//类选择器 *相当于选择所有
$(".test").css({
color: "black"
});
//相当于
var lis = document.getElementsByClassName("test");
for (var i = 0; i < lis.length; i++) {
lis[i].style.color = "yellow";
}
//统一可以使用 document.querySelectorAll()
//选择所有标签
$("*").css({fontSize:20});
层次选择器
/*************层级标签*****************************************/
$("#myTalbe tr:first").css({backgroundColor:"red"});
// $("#myTalbe tr:eq(0)").css({backgroundColor:"#abc"});
$("#myTalbe tr:gt(0):even").css({backgroundColor:"#eee"});
$("#myTalbe tr:gt(0):odd").css({backgroundColor:"#ccc"});
层次选择器示例
过滤选择器
基本过滤选择器
/*************层级标签*****************************************/
$("li:first").css({color:"red"});//所有li标签第一个标签
$("li:last").css({color:"red"});//所有li标签最后一个标签
$("li:not(.test)").css({color:"red"});//除了class为test的标签
$("li:even").css({
color: "red"
}); //所有偶数标签
$("li:odd").css({
color: "green"
}); //所有奇数标签
基本过滤选择器示例
内容过滤选择器
内容过滤选择器示例
可见性过滤选择器示例
可见性过滤选择器示例
属性过滤选择器