JavaScript基础（四）jQuery（二）

JavaScript基础（四）jQuery（二）

---

Html有关的jQUery

获取内容

$("#test").text(); //粗体字确定得到的结果是：确定
$("#test").html(); //粗体字确定得到的结果是：<b>确定</b>
$("#test").val(); //可以得到输入框的值
$("#test").attr("href"); //得到href属性的值

---

设置内容

$("#test").text("Hello world!"); 
$("#test").html("<b>Hello world!</b>"); 
$("#test").val("Hello world!"); //设置输入框的值
$("#test").attr("name"，"value"); 
$("#test").attr("name1":"value1",
                "name2":"value2"
                ); 

• 回调函数
  
  • 什么是回调函数
    
    • 顾名思义，回到上一步
    • 例如，这里要设置新的值，那么原先的值哪里去了？就在回调函数里面找

  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")";
  });

• i为当前元素的位置

• origText是原先的文字

• attr()的回调函数在地址增加一段这种方面很好用

---

添加

$('p').append("inner append text");
$('p').prepend("inner prepend text");
$('p').after("ont after text");
$('p').before("out before text");
$('p').append(txt1,txt2,txt3);

---

删除

$('p').remove(); //删除p
$('p').remove('b'); //删除p里面的b
$('p').empty(); //清空p

---

改变样式表

• 增加

$('p').addClass('blue'); //增加一个样式表
$('p').addClass('blue big'); //增加两个个样式表
$('p, b').addClass('blue'); //两个标签都增加一个样式表

• 删除

$('p').removeClass('blue'); 

• 交替

$('p').toggleClass('blue'); 

• 设置

$("p").css({"background-color":"yellow","font-size":"200%"});

---

遍历

• 祖先

$("span").parent();
$("span").parents();
$("span").parentsUntil();

• 后代

$("div").children();
$("div").find("");

• 同胞

$("div").sibling();

---

AJAX

• 异步JavaScript和xml（Asynchronous JavaScript and XML）
• 不重载整个网页，重新在xml中找到数据传到页面上，也包括文本，html，json

---

load()

$(selector).load(URL,data,callback);

• URL是地址地址后面还可以加id号
  
  • 例如$(“#div1”).load(“demo_test.txt #p1”);
• data是传给服务器的数据，服务器处理完后返回
• callback回调函数
  
  • function(responseTxt,statusTxt,xhr)
    
    • responseTxt - 包含调用成功时的结果内容
    • statusTXT - 包含调用的状态
    • xhr - 包含 XMLHttpRequest 对象

---

从服务器请求数据

注意！！这里和前面都不一样了，直接$.

//从服务器获得数据
$.get(URL,callback);
//先传递给服务器data，再获得数据
$.post(URL,data,callback);

//回调函数一般为function(data,status)，其中data为服务器返回的数据