正文

3 、操作元素 (属性 CSS 和 文档处理)

IP云
IP云V管理员/3 阅读
09/26
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

3   操作元素—属性 CSS 和 文档处理 


  • 3.1 属性操作

$("p").text()    $("p").html()   $(":checkbox").val()

$(".test").attr("alex")   $(".test").attr("alex","sb")

$(".test").attr("checked","checked")  $(":checkbox").removeAttr("checked")

$(".test").prop("checked",true)

$(".test").addClass("hide")

  • 详见实例 【返回顶部】：实例之 返回顶部 【点击链接】

  • 3.1.1、html text val 

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>

<script>

// html([val|fn])
$('p').html();
$("p").html("Hello <b>world</b>!");
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});

// text（） text([val|fn]) 取得所有匹配元素的内容。
$('p').text();
$("p").text("Hello world!");
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
// val([val|fn|arr])
$("input").val();
$("input").val("hello world!");
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});

</script>
</body>
</html>

html text val



  • 3.1.2、属性

<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.12.4.js"></script>
</head>
<body>

<script>

// html([val|fn])
$('p').html();
$("p").html("Hello <b>world</b>!");
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});

// text（） text([val|fn]) 取得所有匹配元素的内容。
$('p').text();
$("p").text("Hello world!");
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
// val([val|fn|arr])
$("input").val();
$("input").val("hello world!");
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});

</script>
</body>
</html>



  • 3.1.3、class css 类

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li>Hello</li>
<li>Hello</li>
<li>Hello</li>
</ul>
<strong>jQuery 代码:</strong>
<script>

// addClass(class|fn) addClass 为每个匹配的元素添加指定的类名。
$("p").addClass("selected");
$("p").addClass("selected1 selected2");

$('ul li:last').addClass(function() {
return 'item-' + $(this).index();
});

// removeClass([class|fn])
$("p").removeClass("selected"); //从匹配的元素中删除 'selected' 类

//删除匹配元素的所有类
$("p").removeClass();
//删除最后一个元素上与前面重复的class
$('li:last').removeClass(function() {
return $(this).prev().attr('class');
});

//toggleClass(class|fn[,sw]) 如果存在（不存在）就删除（添加）一个类。

//根据父元素来设置class属性
$('div.foo').toggleClass(function() {
if ($(this).parent().is('.bar') {
return 'happy';
} else {
return 'sad';
}
});

//每点击三下加上一次 'highlight' 类
var count = 0;
$("p").click(function(){
$(this).toggleClass("highlight", count++ % 3 == 0);
});

</script>
</body>
</html>



3.2、 CSS操作
        3.2.1(样式)   css("{color:'red',backgroud:'blue'}") 
        3.2.2(位置)   offset()    position()  scrollTop()  scrollLeft()    
        3.2.3(尺寸)   height()  width()  
        
  • 例子详见【滚动菜单-案例】  滚动菜单 【点击链接】


3.3 文档处理

       内部插入  $("#c1").append("<b>hello</b>")     $("p").appendTo("div")
                      prepend()    prependTo()

       外部插入  before()  insertBefore()  after insertAfter()
                       replaceWith()   remove()  empty()  clone()
  • 例子详见【添加项目和减去 - 案例】   实例之 添加项目，减去项目案例 【点击链接】



来自为知笔记(Wiz)