jQuery基础操作

这篇博客详细介绍了jQuery中设置/获取样式、追加/移除样式、切换样式、判断样式的方法,以及内容操作如html()、text()、val()。此外,还涵盖了节点创建、插入、删除、替换和复制的操作,以及属性的获取与设置。文章深入浅出地解析了jQuery在DOM操作中的各种实用技巧。
摘要由CSDN通过智能技术生成

样式操作

设置/获取样式

语法

css(name,value) ;
//或
css({name:value, name:value,name:value…}) ;
//设置属性
css(name)

举例

$(this).css("border","5px solid #f5f5f5");
//或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
$(this).css("border");

追加样式

$(selector).addClass(class);
//或  
$(selector).addClass(class1 class2 … classN);

移除样式

$(selector).removeClass("class") ;
//或   
$(selector).removeClass("class1 class2 … classN ") ;

切换样式

$(selector).toggleClass(class) ;

判断样式

$(selector). hasClass(class);

内容及Value值操作

html()

$("div.left").html();//获取
//或
$("div.left").html("<div class='content'>…</div>")//设置

text()

$("div.left").text();//获取
//或
$("div.left").text("<div class='content'>…</div>");//设置

val()     (input标签里的Value值)

$(this).val();//获取
//或 
$(this).val(value);//设置

节点及节点属性操作

创建节点

$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点

插入节点

元素内部插入子节点

语法

功能

append(content)

$(A).append(B)表示将B追加到A中

如:$("ul").append($newNode1);

appendTo(content)

$(A).appendTo(B)表示把A追加到B中

如:$newNode1.appendTo("ul");

prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如:$("ul"). prepend ($newNode1);

prependTo(content)

$(A). prependTo (B)表示将A前置插入到B中

如:$newNode1. prependTo ("ul");

 元素外部插入同辈节点

语法

功能

after(content)

$(A).after (B)表示将B插入到A之后

如:$("ul").after($newNode1);

insertAfter(content)

$(A). insertAfter (B)表示将A插入到B之后

如:$newNode1.insertAfter("ul");

before(content)

$(A). before (B)表示将B插入至A之前

如:$("ul").before($newNode1);

insertBefore(content)

$(A). insertBefore (B)表示将A插入到B之前

如:$newNode1.insertBefore("ul");

删除节点

remove():删除整个节点

empty():清空节点内容

替换节点

replaceWith()

复制节点

$(selector).clone(true) ;

$(selector).clone(false) ;

参数ture或flase, true复制事件处理,flase时反之。

节点遍历

$(selector).children();//遍历子元素
$(selector).next();//遍历同辈之后的
$(selector).prev();//遍历同辈之前的
$(selector).slibings();//遍历同辈前后的
$(selector).parent();//遍历父级
$(selector).parents();//遍历父级和以上的
$(selector).each( );//遍历每一个

属性操作

$(selector).attr([name]) ;//获取
//或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置
$(selector).removeAttr(name) ;//删除

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值