jQuery基础操作指南-优快云博客

1.获得内容和属性

获得内容：text()--获取返回的内容,

html()--获取返回的内容以及html标签,

val()--获取表单字段的值

比如：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });
});
</script>
</head>
<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>

通过val()获取表单的值

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Value: " + $("#test").val());
  });
});
</script>
</head>
<body>
<p>表单：<input type="text" id="test" value="www"></p>
<button>显示</button>
</body>
</html>

获取属性：attr()

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#baidu").attr("href"));
  });
});
</script>
</head>
<body>
<p><a href="http://www.baidu.com" id="baidu">www.baidu.com</a></p>
<button>显示属性值</button>
</body>
</html>

设置内容：

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

回调函数的使用：

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

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")";
  });
});

设置属性（可以带几个参数）：

$("button").click(function(){
  $("#baidu").attr({"href","http://www.baidu.com"，

                    "title","baidu news"});
});

属性带有回调函数：

$("button").click(function(){
  $("#baidu").attr("href", function(i,origValue){
    return origValue + "/news";
  });
});

2.添加以及删除元素

添加四种方法：

append() - 在被选元素的结尾插入内容 $("p").append("Some appended text."，“Some appended text.”);
prepend() - 在被选元素的开头插入内容 $("p").prepend("Some prepend text."，“Some appended text.”);
after() - 在被选元素之后插入内容 $("p").after("Some text after"，"Some text after");

before() - 在被选元素之前插入内容 $("p").before("Some text before"，"Some text before");

删除：$("#demo").remove(); 删除标签id为demo的元素以及子元素(移除整个控件)

$("#demo").empty(); 删除标签id为demo的子元素(清空内容)

$("p").remove(".demo"); 删除p标签下id为demo的特定控件

3.css的使用

操作css：addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

addClass：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>
<h1>标题 1</h1>
<p>这是一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>
</body>
</html>

removeClass：

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

toggleClass：

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

css：

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

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

4.jQuery尺寸

尺寸方法

width()：方法设置或返回元素的宽度（不包括内边距、边框或外边距）--style中的width
height()：方法设置或返回元素的高度（不包括内边距、边框或外边距）--style中height
innerWidth()：方法返回元素的宽度（包括内边距）--style中width+paddingLeft+paddingRight
innerHeight()：方法返回元素的高度（包括内边距）--style中height+paddingTop+paddingBottom

outerWidth()：方法返回元素的宽度（包括内边距、边框和外边距）

--style中width+paddingLeft+paddingRight+2*border

outerHeight()：方法返回元素的高度（包括内边距、边框和外边距）

--style中height+paddingTop+paddingBottom+2*border