jQuery - Corn1ng's Blog

基础语法 ${selecttor}.action()

所有的jQuery函数位于一个document ready 函数中

1
2
3

$(document).ready(function(){
    //jquery 代码。
});

jQuery 选择器

元素选择器

$(“p”) 在页面中选择所有<p>元素。

$(document).ready(funcion(){
            $("button").click(funcion(){
            $("p").hide();
                              });
                  });

id选择器

$(“#test”)在页面中选择Id 为 test 的元素。
.class (泪点) .class 选择器

$(“.text”) 选择所有class=”text”的元素。

jQuery 事件

shijian

mouseenter() 当鼠标指针穿过元素时，会发生mouseenter事件。

mouseleave() 当鼠标离开元素时，会发生 mouseleave事件。

mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生

focus() 当元素获得焦点时，会发生focus事件。

Blur()当元素失去焦点时，会发生blur事件。

jQuery 获取内容和属性

三个用于dom操作的jQuery方法

text() 设置或返回所选元素的文本内容。html() 设置或返回所选元素的内容（包括HTML标记）val() 设置或返回表单字段的值

attr()方法用于获取属性值。

</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#a").attr("href"));
  });
});
</script>


<body>
<p><a href="http://www.222.com" id="a">菜鸟教程</a></p>
<button>显示 href 属性的值</button>
</body>
// 显示 http://www.222.com

jQuery 设置内容和属性

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery attr() 方法也用于设置/改变属性值。

1
2
3

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

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

jQuery 添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery 删除元素

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery 操作css

.important
{
        font-weight:bold;
        font-size:xx-large;
}
 
.blue
{
        color:blue;
}

addclass()方法添加css样式。

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

removeclass()方法删除css 属性

1
2
3

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

css() 方法

返回css 属性返回首个匹配元素的background-color 值。

1	$("p").css("background-color");

设置css属性

1	$("p").css("background-color","yellow");

jQuery 遍历

指根据其他元素的关系来查找HTML元素。

向上遍历DOM树。parernt() parents() parentsUntil()

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

1
2
3

$(document).ready(function(){
  $("span").parentsUntil("div");
});

向下遍历DOM 树 children() find()

children() 方法返回被选元素的所有直接子元素

find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回属于 <div> 后代的所有 <span> 元素：

1
2
3

$(document).ready(function(){
  $("div").find("span");
});

水平遍历DOM树 siblings() next() mextAll() nextUtil() prev() prevAll() prevUntil()

jquery AJAX

jquery load() 方法 $(selector).load(URL,data,callback);

load方法从服务器加载数据，并把返回的数据放入到被选的元素中。必须的URL 参数规定希望加载的URL。可选的data参数规定与请求一同发送的查询字符串键值对集合。可选的callback参数是load()方法完成后所执行的函数名称。

回调函数的参数可以设置不同的参数

Responsetxt 包含调用成功时的结果内容

statusTXT 包含调用的状态

xhr 包含XMLHttpRequest对象。

get() 方法和post() 方法

get() 和post() 请求从服务器请求数据

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

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

Contents