jquery --- > DOM操作、表单元素的初始化

最新推荐文章于 2024-10-03 10:12:38 发布

栗子好好吃

最新推荐文章于 2024-10-03 10:12:38 发布

阅读量570

点赞数

分类专栏： jQuery 文章标签：方便查询

jQuery 专栏收录该内容

17 篇文章

订阅专栏

博客给出了一系列jQuery操作示例，包括获取ul里特定li节点、获取元素属性、创建并添加节点、移动节点、删除节点，以及对select框、复选下拉框、单选按钮和复选按钮进行初始化设置，参考了《锋利的jQuery》第2版。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.获取ul里第2个li节点:

var $li_two = $("ul li:eq(1)");
// 获取该节点的内容
var $li_two_txt = $li_two.text();

2.获取p元素节点的title属性:

var $para = $("p");
var p_title = $para.attr("title");

3.创建2个li节点,并添加道ul中:

var $li_one = $("<li>节点1</li>")
var $li_two = $("<li>节点2</li>")
$("ul").append($li_one);
$("ul").append($li_two);

4.新建一个li插入到ul的第3个子元素li(假设存在)之后:

var $li_3 = $("ul li:eq(2)");
var $li_insert = $("<li>insert</li>");
$li_insert.insertAfter($li_3);

5.将ul的第3个子元素,放到第2个子元素前面:

var $li_2 =$("ul li:eq(1)");
var $li_3 =$("ul li:eq(2)");
$li_3.insertBefore($li_2);

6.删除ul中的第2个li元素:

var $li = $("ul li:eq(1)");
// 再加回去 - -
$("ul").append($li);
// 或
$li.appendTo("ul");

7.从ul中删除title为’栗子的’li元素:

$("ul li").remove(li[title="栗子"])

8.select框初始化选中值为"2号"的下拉框:

// html 
<select id="single">
    <option>1号</option>
    <option>2号</option>
    <option>3号</option>
</select>

// js
$('#single').val("2号")  
// 或
$("#single option:eq(1)).attr("selected",true);

9.初始化选中值为"1号","3号"的复选下拉框:

$("mutiple").val(["1号","3号"])

10.初始选择值为"radio2"的单选按钮:

// html
<input type="radio" value="radio1" /> 单选1
<input type="radio" value="radio2" /> 单选2
<input type="radio" value="radio3" /> 单选3

//js
$(":radio").val("radio2");
// 或
$("[value=radio2]:radio").attr("checked",true);

11.初始选择值为[“check1”,“check3”]的复选按钮

$(":checkbox").val(["check1","check3"]);

参考《锋利的jQuery》(第2版)P68~P69