JavaScript之jQuery（十三）

1、jQuery简介

jQuery是一个JavaScript函数库。
 
jQuery对象和JavaScript中的DOM对象：二者对象的方法/函数不能互换。
 
jQuery作用：使用封装好的Ajax方法，使用动画效果（jQuery内置有动画库），简化操作DOM元素的代码。
 

//jQuery底层是使用闭包来封装的
(function(window){
window.jQuery=function(){
…
}
})(window);

2、jQuery语法

2.1、操作onload事件

//jQuery操作onload事件
$(document).ready(function(){ 
    // jQuery代码...
});
//简单写法
$(function () {
    // jQuery代码...
});

//JavaScript操作onload事件
window.οnlοad=function(){
     //JavaScript代码
}

//为什么代码要写在onload事件的匿名函数中？
//这是为了防止文档在加载完之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

//二者区别：前者可以实现多个初始化操作函数，后者只能实现一个初始化操作函数。

2.2、jQuery选择器

/* $(selector).action()
$美元符号定义 jQuery，selector选择器是基于CSS选择器的，action() 执行对元素的操作；
按照jQuery的方式来选取网页上的标签元素，选取后就可以操作元素啦。
*/
//示例：
$("#box");    //选取id为box的元素（网页中id是唯一的）
$("p");       //选取页面上所有的p元素
$(".test");   //选取所有 class=".test" 的元素
$("p.test");  //选取 class="test"的 
 元素
$("p:first"); //选取第一个 
 元素
$("[href]");  //选取带有 href 属性的元素
$(this).hide()     //隐藏当前元素
$("p").hide()      //隐藏所有 
 元素
$("p.test").hide() //隐藏所有 class="test" 的 
 元素
$("#test").hide()  //隐藏 id="test" 的元素

3、jQuery操作样式

方法名	描述
addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类
toggleClass()	对被选元素进行添加/删除类的切换操作
css()	设置或返回样式属性
attr()	设置或返回被选元素的属性和值

//示例：
//添加类
$("div").addClass("important");
//添加多个类
$("div").addClass("important blue");
//删除类
$("h1,h2,p").removeClass("blue");
//来回添加/删除类
$("h1,h2,p").toggleClass("blue");

//返回CSS属性
$("p").css("background-color"); 
//设置CSS属性
$("p").css("background-color","yellow"); 
//设置多个CSS属性
$("p").css({"background-color":"yellow","font-size":"200%"}); 

4、元素的设置和获取

获取页面元素的属性：

$("#btn").click(function(){
  //获得元素对象
  var tex=$("#inp1");
  //获得元素对象的属性
  var te=tex.attr("type");
  var cl =tex.attr("class");
  //获得元素固有的属性值
  var val =tex.attr("value");
  console.log(te+"------"+cl+"-----"+val);
  //获得文本框实时输入的值
  var val2=tex.val();
}

操作页面元素的属性：

tex.attr("type","button");
tex.attr("value","测试按钮");
//支持json数据格式
tex.attr({"type":"button","value":"测试按钮"});
var ch= $("#fav").attr("checked");
var flag=$("#fav").prop("checked",true);

操作页面元素的文本：

方法名	描述
text()	设置或返回元素的文本内容。(相当于DOM对象的innerText属性)
html()	设置或返回元素的HTML代码。(相当于DOM对象的innerHTML属性);
val()	设置或返回表单中的输入元素的值。

5、jQuery遍历

jQuery遍历就是根据其相对于其他元素的关系来 查找（或选取）HTML 元素。
 
通过 jQuery 遍历，我们能够从当前元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

5.1、向上：找子孙元素

方法名	描述
parent()	直接的父元素
parents()	所有的直系父辈元素(到html标记为止)
parentsUntil(“选择器”)	直接父元素到指定祖先元素之间的所有元素

5.2、向下：找子孙元素

方法名	描述
children()	所有直系子元素（只找一代）
find()	所有子孙元素

5.3、水平：找兄弟元素

方法名	描述
siblings()	返回所有兄弟元素
next()	下一个兄弟元素
nextAll()	所有跟随的兄弟元素
nextUntil()	返回两个给定参数之间的所有跟随的兄弟元素
prev()	返回上一个兄弟元素
prevAll()	返回所有前面的兄弟元素
prevUntil()	返回两个给定参数之间的所有前面的兄弟元素

5.4、元素筛选

方法名	描述
first()	返回被选元素的首个元素。
last()	返回被选元素的最后一个元素。
eq(下标)	返回被选元素中带有指定索引号的元素。
filter(“筛选内容”)	返回匹配 筛选内容 的元素 $("p").filter(".url");
not(“筛选内容”)	返回不匹配 筛选内容 的元素 $("p").not(".url");

5.5、遍历jQuery对象

//主要用于遍历DOM
$("选择器").each(function(index,element){
  //index：表示元素的索引位置
  //element：当前元素对象(可用this表示)
  ...
});
//任何对象都能遍历，主要用来遍历数组或对象
$.each(object,function(index,element){
  //object：为需要被遍历的对象
  //index：表示元素的索引位置；
  //element：当前元素对象(可用this表示)
  ……
})

6、jQuery事件

事件绑定：

/*页面加载完执行的操作*/
$(function () {
    /*******事件的基础绑定*************/
    $("#bu1").click(function () {
        alert("单击事件");
    })
    $("#bu1").dblclick(function () {
        alert("双击事件");
    })
    /*******bind事件绑定**************/
    $("#bu2").bind('click', function () {
        alert("单击事件绑定");
    })
    //内容还支持json数据格式
    $("#bu2").bind({
        'click': function () { },
        'dblclick': function () { },
        'blur': function () { }
    })
    /*********one一次事件绑定*************/
    $("#bu3").one('click', function () {
        alert("一次事件绑定");
    })

事件解绑：

/*********trigger事件操作****************/
$("#bu4").click(function () {
    $("#bu1").trigger('dblclick');
    $("#bu3").trigger('click');
})
/********事件的解绑*********************/
$("#bu5").click(function () {
    //事件的解绑
    //解绑指定对象上的所有事件
    $("#bu1").unbind();
    //解绑指定的事件
    $("#bu1").unbind("dblclick");
})
$(".bu6").click(function () {
    alert("单击事件的绑定");
})
$(".bu6").live('click', function () { //live() jQuery1.7版本后无法使用！
    alert("单击事件绑定");
})
$("body").append(' ');

7、jQuery动画

//获得div对象
var div1 =$("#div1");
//3s隐藏动画
div1.hide(3000);
div1.show(3000);
//隐藏的显示 ---显示的隐藏
//$("div").toggle(3000);
//滑动上
div1.slideUp(3000);
//滑动下
div1.slideDown(3000);
//滑动上--滑动下 滑动下---滑动上
$("div").slideToggle(3000);
//淡出
div1.fadeOut(3000);
//淡入
div1.fadeIn(3000);

8、异步操作

8.1、ajax方法

通过 jQuery AJAX 方法，能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON ，同时能够把这些外部数据直接载入网页的被选元素中。

常用参数：

参数名	描述
url	请求到服务器端的url路径
type	请求的类型：GET 、POST 、PUT 、DELETE
async	是否异步操作：true（默认），false
data	发送给服务器端的数据（当无数据发送到服务端时省略）
dataType	指定服务器端返回的数据类型（xml，html，script，json， jsonp）
success:函数()	请求成功后的回调函数
error:函数()	请求失败后的回调函数

示例：

$("button").click(function(){
 $.ajax({
     url:"DemoServlet",
     type:"get",
     async:true,
     data:{"username":"王二狗"},
     dataType:"json",
     success:function(result){
        alert("成功^o^");
     },
     error:function(result){
        alert("失败~o~");
     }
 });
});

8.2、load方法

/*
load方法与ajax方法差不多，都是用来操作异步请求的
URL：为请求后端资源的路径
data：发送到后端的键值对数据
callback：回调函数，其参数有 ==>
responseTxt：包含调用成功时的结果内容
statusTxt：包含调用的状态
xhr：包含 XMLHttpRequest 对象
*/
$(selector).load(URL,data,callback);

//实例
$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert(" 外部内容加载成功！");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

8.3、其它方法

方法名	描述
$.get()	使用 AJAX 的 HTTP GET 请求从服务器加载数据
$.post()	使用 AJAX 的 HTTP POST 请求从服务器加载数据
$.getJSON()	使用 HTTP GET 请求从服务器加载 JSON 格式的数据
$.getScript()	使用 AJAX 的 HTTP GET 请求从服务器加载并执行 JavaScript文件

//示例：仅供参考^o^

//使用 AJAX 的 GET 请求来改变 div 元素的文本：
$.get("demo.txt", function(result){
    $("div").html(result);
});

//通过 AJAX 的 POST 请求来改变 div 元素的文本：
$.post("demo.txt",{suggest:txt},function(result){
    $("div").html(result);
});

//使用 AJAX 请求来获得 JSON 数据，并输出结果：
$.getJSON("demo_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    });
});

//使用 AJAX 请求来获得并运行一个 JavaScript 文件：
$("button").click(function(){
  $.getScript("demo.js");
});

---

上一篇文章	下一篇文章
JavaScript之JSON（十二）	无