jquery笔记

一、text()、html()、val()的使用
　　获得设置内容 - text()、html() 以及 val()
　　三个简单实用的用于 DOM 操作的 jQuery 方法：
  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值 
　　1、获取内容：
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); 
$("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });
$("#btn3").click(function(){ alert("值为: " + $("#test").val()); });

　　2、设置内容：

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

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

 二、标签添加删除

　　1、添加新内容的四个 jQuery 方法：　
  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容
$("p").append("追加文本");
$("p").prepend("在开头追加文本");
$("img").after("在后面添加文本"); $("img").before("在前面添加文本");
　　2、如需删除元素和内容，一般可使用以下两个 jQuery 方法：
  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素
$("#div1").remove();
$("#div1").empty();
$("p").remove(".italic"); //删除 class="italic" 的所有 <p> 元素
 
三、load(),$.get(),$.post()语法：
$(selector).load(URL,data,callback);
$.get(URL,callback);
$.post(URL,data,callback);

 四、ready() 方法：

　　在文档加载后激活函数，ready() 函数不应与 <body onload=""> 一起使用。

 五、显示隐藏方法：
       1、隐藏：hide()、显示：show()、显示隐藏：toggle()、 渐渐效果：slideToggle()
　　2、渐变时间在小括号里加：hide(1000)、show(1000)、toggle(1000)
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("p").toggle();
    });
});
</script>
</head>
<body>
    <button type="button">切换</button>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

 

 
 
posted @ 2017-05-16 16:08  山水花草  阅读(151)  评论(0)    收藏  举报