jQuery技术学习总结
一、jQuery简介
- jQuery是一个JavaScript库，它能够简化JavaScript编程。
- jQuery是目前最流行的JS框架。
- jQuery能够兼容于目前所有主流的浏览器，包括IE6。
- jQuery能够对HTML元素进行选取和修改、实现JavaScript动画、选取操作dom对象、绑定事件、CSS操作、Ajax请求等。
二、第一个jQuery实例
/* $(document)：$是jQuery中的函数名称，document作为函数的参数 作用是将document对象转化为jQuery库能用的对象 ready 是jQuery中的函数 dom加载成功后会执行ready函数中的内容 function是自定义函数，在onLoad之后执行 */
$(document).ready(function () {
alert("Hello jQuery")
})
//与上述代码功能相同（是其简化写法）
$(function(){
alert("Hello jQuery")
})
三、dom对象与jQuery对象的相互转换
- dom对象转换为jQuery对象
/* dom对象：使用js创建的对象 jQuery对象：使用jQuery语法创建的对象，jQuery对象是一个数组 dom对象可以与jQuery对象相互转换 dom对象转换为jQuery对象之后才可使用jQuery的函数 */
function change() {
//将dom对象转换为jQuery对象
var obj = document.getElementById("id");
//使用dom的value属性性获取值
alert(obj.value);
//转换
var jObj = $(obj);
//显示结果
alert(jObj.val()); //val()是jQuery中的函数，下文中有详细说明
}
- jQuery对象转换为dom对象
function change() {
//使用jQuery语法获取页面中的dom对象
var obj = $("#id").get(0); //通过数组下标获取dom对象
var n = obj.value;
obj.value = n * n; //更新dom中value的值
}
四、jQuery选择器
- 基本选择器：id、class、标签、混合选择器等
function func1() {
var obj = $("#one"); //id选择器
obj.css("background","red"); //更新css
}
function func2() {
var obj = $(".two"); //class选择器
obj.css("background","red"); //更新css
}
function func3() {
var obj = $("span"); //标签选择器
obj.css("background","red"); //更新css
}
function func4() {
var obj = $("*"); //全局选择
obj.css("background","red"); //更新css
}
function func5() {
var obj = $("#one,.two"); //混合选择器
obj.css("background","red"); //更新css
}
- 表单选择器：根据type属性值定位
语法：$(":表单类型")
function func1() {
var obj = $(":text"); //文本框
alert(obj.val());
}
function func2() {
var obj = $(":radio"); //单选按钮
for (var i=0; i < obj.length; i++){
var dom = obj[i];
alert(dom.value);
}
}
function func3() {
var obj = $(":checkbox"); //复选框
for (var i=0; i<obj.length; i++){
var dom = obj[i];
var jobj = $(dom);
alert(jobj.val());
}
}
五、jQuery过滤器
-
基本过滤器：
1.选择第一个first，保留数组中第一个dom对象 $("选择器:first") 2.选择最后一个last，保留数组中最后一个dom对象 $("选择器:last") 3.选择数组中指定对象 $("选择器:eq(索引)") 4.选择数组中小于索引的全部dom对象 $("选择器:lt(索引)") 5.选择数组中大于索引的全部dom对象 $("选择器:gt(索引)")
//基本过滤器：
$(function(){
$("#btn1").click(function(){
var obj = $("div:first"); //获取所有div中第一个dom对象
obj.css("background","red");
})
$("#btn2").click(function(){
var obj = $("div:last"); //获取所有div中最后一个dom对象
obj.css("background","red");
})
$("#btn3").click(function(){
var obj = $("div:eq(2)"); //获取所有div中下标等于2的dom对象
obj.css("background","red");
})
$("#btn4").click(function(){
var obj = $("div:lt(2)"); //获取所有div中下标小于2的所有dom对象
obj.css("background","red");
})
$("#btn5").click(function(){
var obj = $("div:gt(2)"); //获取所有div中下标大于2的所有dom对象
obj.css("background","red");
})
})
- 表单属性过滤器：
/* 表单属性过滤器 */
$(function(){
$("#btn1").click(function(){
var obj = $(":text:enabled"); //获取所有文本框中可编辑的
obj.val("hello"); //设置文本框的值
})
$("#btn2").click(function(){
var obj = $(":checkbox:checked"); //获取所有复选框中被选中的
for(var i=0; i<obj.length; i++){
//输出获取的值
alert(obj[i].value);
}
})
$("#btn3").click(function(){
var obj = $("select>option:selected"); //获取所有下拉列表框中被选中的
for(var i=0; i<obj.length; i++){
//输出获取的值
alert(obj[i].value);
}
})
})
六、jQuery常用事件
$(function(){
//1.鼠标单击事件
$("#btn").click(function () {
//添加新的按钮
$("div").append("<input type='button' id='newBtn' value='新增按钮'/>")
//为新增按钮添加监听事件
$("#newBtn").on("click",function () {
alert("新增的按钮被单击了");
})
})
//2.鼠标双击事件
$("div").dblclick(function () {
$("div").hide();
})
//3.表单事件
$(":text").change(function(){
alert("表单已被修改")
})
})
七、jQuery函数
-
函数：val()；text()；attr()；
val()：操作dom对象中的value属性，带参数时是给value赋值，不带参数时是取值 text()：操作数组中所有dom对象的文字显示内容属性 attr()：对val,text之外的其他属性进行操作 $(选择器).attr("属性名")：获取dom对象数组第一个对象的属性值 $(选择器).attr("属性名","属性值")：设置数组所有dom对象的指定属性值
$(function(){
$("#btn1").click(function(){
var obj = $(":text");
//获取第一个文本框值
alert(obj.val());
//获取所有文本框值
for(var i=0; i<obj.length; i++){
var dom = obj[i];
alert(dom.value);
}
})
$("#btn2").click(function(){
$(":text").val("三国演义");
})
$("#btn3").click(function(){
//text()函数用于获取所有div的文本值，连成一个字符串
alert($("div").text());
})
$("#btn4").click(function(){
//text("参数")函数用于设置所有div的文本值
$("div").text("hahahahahah");
})
$("#btn5").click(function(){
//attr()函数用于获取某标签指定属性的值
alert($("img").attr("src"));
})
$("#btn6").click(function(){
//attr("属性名","值")函数用于设置指定属性的值
$("img").attr("src","../img/t16.jpg");
})
})
- 函数：remove(); empty(); append(); html(); each()；
$(function(){
$("#btn1").click(function(){
//remove()去除所有父子对象
$("select").remove();
})
$("#btn2").click(function(){
//empty()只去除所有子对象
$("select").empty();
})
$("#btn3").click(function(){
//append(参数)为指定dom对象添加元素
$("div").append("<input type='button' value='新增按钮' />");
$("div").append("<table style='border:1px solid black;'><tr><td>第一列</td><td>第二列</td></tr></table>")
})
$("#btn4").click(function(){
//html()获取标签内容
alert($("span").html());
})
$("#btn5").click(function(){
//html(参数)设置指定dom对象的内容
$("span").html("我是新的<b>元素</b>");
})
$("#btn6").click(function(){
//each()循环普通数组
var arr = [11,22,33];
$.each(arr, function (i,n) {
alert("i是索引："+i+",n是值："+n);
})
})
$("#btn7").click(function(){
//each()循环dom对象数组
var arr = $(":text");
$.each(arr, function (i,n) {
alert("i是索引："+i+",n是值："+n.value);
})
})
$("#btn8").click(function(){
//each()循环json数组
var json = {
"name":"张安","age":"23"};
$.each(json, function (i,n) {
alert("i是key："+i+",n是值："+n);
})
})
$("#btn9").click(function(){
//each()循环对象，jquery对象就是包含若干个dom对象的数组
var obj = $(":text");
$(":text").each(function (i,n) {
alert("i="+i+", n="+n.value);
})
})
})
八、jQuery动画
- 隐藏、显示
$(function () {
//隐藏元素
$("#hide").click(function () {
$("#view").hide();
})
//显示元素
$("#show").click(function () {
$("#view").show();
})
})
- 淡入、淡出
语法： $(选择器).fadeIn(speed,callback)
语法： $(选择器).fadeOut(speed,callback)
语法： $(选择器).fadeToggle(speed,callback)
参数speed：淡入淡出的速度，取值slow、空、数字(毫秒)
参数callback：为淡入淡出后执行的函数。
$(function () {
//淡入
$("#in").click(function () {
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(4000);
})
//淡出
$("#out").click(function () {
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(4000);
})
//fadeToggle
$("#io").click(function () {
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(4000);
})
})
- 滑动
$(function () {
//向下滑
$("#slide1").click(function () {
$("#content").slideDown();
})
//向上滑
$("#slide2").click(function () {
$("#content").slideUp(3000);
})
//slideToggle
$("#slide3").click(function () {
$("#content").slideToggle("slow");
})
})
- 动画
语法：$(选择器).animate({param},speed,callback)
参数speed：取值slow、空、数字(毫秒)
参数params： 参数定义形成动画的 CSS 属性
参数callback：完成动画后执行的函数
$(function () {
//演示动画
$("#begin").click(function () {
$("#div1").animate({
left:'200px',
width:'100px',
heigth:'100px'
},4000);
})
//停止动画
$("#stop").click(function (){
$("#div1").stop();
})
})
九、jQuery实现Ajax异步请求
- 见往期文章：使用jQuery实现Ajax请求
