jQuery学习总结

jQuery

jQuery一.文档就绪事件(在HTML加载完毕后执行jquery代码)二.jQuery 选择器三.jQuery 事件四.jQuery 效果- 隐藏和显示五.获取内容和属性获取内容获取属性六.设置 类七.获取或修改css样式八.AJAX get() 和 post() 方法

一.文档就绪事件(在HTML加载完毕后执行jquery代码)

1.$(document).ready(function(){

//jquery代码

})

2.$(function(){

//jquery代码

})

二.jQuery 选择器

jQuery 中所有选择器都以美元符号开头：$()。()里面是css选择器

$(this):选取当前 HTML 元素

$("p.intro"):选取 class 为 intro 的 <p> 元素

$("a[target!='blank']"):选取所有 target 属性值不等于 "blank" 的 <a> 元素

三.jQuery 事件

$("p").click(function(){ // 动作触发后执行的代码!!});

四.jQuery 效果- 隐藏和显示

hide():隐藏元素

show():显示元素

toggle():在显示与隐藏之间来回切换

五.获取内容和属性

获取内容

1. text():设置会返回所选元素的文本内容

2. html():设置或返回所选元素的内容(包括HTML标记)

3. val():设置或返回表单字段的值

获取属性

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});

attr(属性)---获取

attr(属性,新的属性值)---修改

六.设置 类

1.addClass() - 向被选元素添加一个或多个类

2.removeClass() - 从被选元素删除一个或多个类

3.toggleClass() - 对被选元素进行添加/删除类的切换操作

七.获取或修改css样式

1.获取元素样式

css("propertyname");

2.修改元素样式

css("propertyname","value");

3.修改多个元素样式

css({"propertyname":"value","propertyname":"value",...});

八.AJAX get() 和 post() 方法

$.get(URL,callback);

$("button").click(function(){
  $.get("demo_test.php",function(data,status){
    alert("数据: " + data + "
状态: " + status);
  });
});

$.post(URL,data,callback);

$("button").click(function(){
    $.post("/try/ajax/demo_test_post.php",
    {
        name:"菜鸟教程",
        url:"http://www.runoob.com"
    },
        function(data,status){
        alert("数据: 
" + data + "
状态: " + status);
    });
})