前端开发之jQuery属性和文档操作

时间:2022-08-14 13:31:03

主要内容:

  1、jQuery属性操作

  2、jQuery文档操作

一、jQuery属性操作

  1、什么是jQuery的属性操作?

    jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作,类样式操作和值操作。

    (1)html 属性操作   

对html文档中的属性进行读取,设置和移除操作。例如:attr(),removeAttr().

    (2) DOM属性操作

对DOM元素的属性进行读取,设置和移除操作。例如:prop(),removeProp().

    (3) 类样式操作

对DOM属性className进行添加,移除操作。例如:addClass(),removeClass(),toggleClass().

    (4) 值操作

对DOM属性value进行读取和设置操作。例如:html(),text(),val().

  2、html属性操作实例解析

    所谓html属性操作,更直白地说就是获取页面标签,l例如:attr()、removeAttr()等。

    实例一:attr() --- 设置属性值或者被选中元素的属性值   

$(document).ready(function(){
// attr() 设置一个属性值的时,只是获取值
var id = $("div").attr("id");
console.log(id); $("button").click(function(){
$("#box p").text($("#box").attr("id")); // attr()如果设置两个值,表示设置属性
// 1、设置一个值,比如设置div的class为box2
$("#box").attr("class","box2");
// 2、设置多个值时,使用对象存储,参数为对象,键值对存储(如果设置多个类名,不能使用attr())
$("#box").attr({"class":“cc”,name:"匆匆"});
})
})

    完整代码: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div>
<span>我是一个span标签</span>
<button class="btn">点我</button>
<div id="box2">
<p>hello,everyone</p>
<button id="btn2">Get</button>
</div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
//HTML属性操作(即获取页面标签)
// attr():设置属性值或者被选元素的属性值
// 获取值:attr() 设置一个属性值的时候,只是获取值
var id = $('div').attr('id');
console.log(id);
$('button').click(function () {
$('#box p').text($('#box').attr('id'));
});
// attr()如果设置两个值,表示设置属性
// 1、设置一个值,设置div的class为box2
$('div').attr('class','box2');
// 2、设置多个值时,使用对象存储,参数为对象,键值对存储;如果设置多个类名,不能使用attr()
$('#box').attr({'class':'foo2',name:'匆匆'});
}) </script>
</html>

    实例二:removeAttr() --- 从匹配的元素中删除一个属性    

$(document).ready(function(){
// 删除一个属性
$("#box").removeAttr("class"); // 同时删除多个属性时,中间以空格隔开
$("#box").removeAttr("class name"); // 查看是否删除
console.log($("#box").attr("class")); // underfined
})

    完整代码:  

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div> </body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
$('#box').removeAttr('class');
$('#box').removeAttr('class name'); // 同时删除 class和name
console.log($('#box').attr('class')); // undefined
}) </script>
</html>

  3、DOM属性操作

    对DOM元素的属性进行读取,设置和移除操作。例如:prop()、removeProp()等。

    实例一:porp() --- 获取匹配的元素集中的第一个元素的属性值,它是对当前匹配到的DOM对象设置属性。    

$(document).ready(function(){
// 获取属性值
console.log($("li").prop("class")); // one // 设置值
$("li:eq(0)").prop({"user":"cc","name2":"cc2"}); // li:eq(0)表示获取到第一个li标签
//$("li").first().prop({"user":"cc","name2":"cc2"}); // .first()作用同上
// 查看设置的属性值
console.log($("li:eq(0)"))
// console.log($('li').first()); // 同上
})

    完整代码:    

<!DOCYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div>
<ul>
<li class="one">暮光微凉1号</li>
<li class="two">暮光微凉2号</li>
<li class="three">暮光微凉3号</li>
<li class="four">暮光微凉4号</li>
</ul>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
// DOM属性操作
// prop():获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。
console.log($('li').prop('class')); // one
//设置值
$('li:eq(0)').prop({'user':'cc','name2':'cc2'});
console.log($("li:eq(0)"));
$('li').first().prop({'user':'cc','name2':'cc2'});
console.log($('li').first());
}) </script>
</html>

    实例二:removeProp() --- 删除由.Prop() 方法设置的属性值

$(document).ready(function(){
// removeProp() 删除.prop()方法设置的属性集
// 先查看一下
console.log($("li:eq(0)").prop("user")) ; // cc
$("li:eq(0)").removeProp("user");
console.log($("li").first().prop("user")); // underfined
})

    完整代码: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div>
<ul>
<li class="one">暮光微凉1号</li>
<li class="two">暮光微凉2号</li>
<li class="three">暮光微凉3号</li>
<li class="four">暮光微凉4号</li>
</ul>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
// removeAttr():从每一个匹配的元素中删除一个属性
$('#box').removeAttr('class');
$('#box').removeAttr('class name'); // 同时删除 class和name
</script>
</html>

  4、类样式操作

   类样式操作是对DOM属性className进行添加,移除操作。例如:addClasss()、removeClass()、toggleClass()。

   实例:  

  // 类样式操作:
// addClass() removeClass()
$('span').addClass('span2 span3'); // 可同时添加多个或删除多个类标签
$('span').removeClass('span3');
var isBig = true;
$('span').click(function(){
if(isBig){
$(this).addClass('active'); // 点击放大
isBig = false;
}
else{
$(this).removeClass('active'); // 变回最初的样式
isBig = true;
}
});

  完整代码: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
<style type="text/css">
span.active{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div>
<ul>
<li class="one">暮光微凉1号</li>
<li class="two">暮光微凉2号</li>
<li class="three">暮光微凉3号</li>
<li class="four">暮光微凉4号</li>
</ul>
<span>我是一个span标签</span>
<button class="btn">点我</button>
<div id="box2">
<p>hello,everyone</p>
<a href="#">百度一下</a>
<input type="text" value="嘿嘿哈" name=""/>
<button id="btn2">Get</button>
</div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
// 类样式操作:
// addClass() removeClass()
$('span').addClass('span2 span3'); // 可同时添加多个或删除多个类标签
$('span').removeClass('span3');
var isBig = true;
$('span').click(function(){
if(isBig){
$(this).addClass('active'); // 点击放大
isBig = false;
}
else{
$(this).removeClass('active'); // 变回最初的样式
isBig = true;
}
});
})
</script>
</html>

  5、值属性的操作

   值属性是对DOM属性value进行读取和设置操作。例如:text()、html()、val()。 

// 值属性的操作 text() html() val()
// text() 仅仅获取文本
console.log($('#box2').text()); // hello,everyone
// html() 获取所有
console.log($('#box2').html()); // <p>hello,everyone</p> // 设置值
$('#box2').text('<a>百度一下</a>');
$('#box2').html('<a href="https://home.cnblogs.com/">暮光微凉</a>'); //获取值
console.log($('input').val());
$('input').val('嘿嘿哈个毛线。。。');
$('#btn2').click(function(){
var val = $('input').val();
$('.box2').text(val); });

  表单控件使用的一个方法,监听Input的输入: 

        $('input').change(function(){
console.log($(this).val());
});

  完整代码: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery的属性操作</title>
<style type="text/css">
span.active{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box" class="foo">
<p>hello,暮光微凉...</p>
</div>
<ul>
<li class="one">暮光微凉1号</li>
<li class="two">暮光微凉2号</li>
<li class="three">暮光微凉3号</li>
<li class="four">暮光微凉4号</li>
</ul>
<span>我是一个span标签</span>
<button class="btn">点我</button>
<div id="box2">
<p>hello,everyone</p>
<a href="#">百度一下</a>
<input type="text" value="嘿嘿哈" name=""/>
<button id="btn2">Get</button>
</div>
</body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript"> $(document).ready(function () {
// 值属性的操作 text() html() val()
// text() 仅仅获取文本
console.log($('#box2').text()); // hello,everyone
// html() 获取所有
console.log($('#box2').html()); // <p>hello,everyone</p> // 设置值
$('#box2').text('<a>百度一下</a>');
$('#box2').html('<a href="https://home.cnblogs.com/">暮光微凉</a>'); //获取值
console.log($('input').val());
$('input').val('嘿嘿哈个毛线。。。');
$('#btn2').click(function(){
var val = $('input').val();
$('.box2').text(val); });
// 表单控件使用的一个方法,监听input的输入
$('input').change(function(){
console.log($(this).val());
}); }) </script>
</html>

  6、操作input的value值

    HTML部分 

    <form action="">
<!--单选按钮-->
<input type="radio" name="sex" value="1"/>男
<input type="radio" name="sex" value="2" checked=""/>女 <!--默认选项-->
<input type="radio" name="sex" value="3" />gay
<hr>
<!--多选框,设置checked表示默认-->
<input type="checkbox" value="a" checked=""/>散步
<input type="checkbox" value="b" checked=""/>美食
<input type="checkbox" value="c" checked=""/>阅读
<input type="checkbox" value="d" checked=""/>喝茶
<hr>
<!--下拉框-->
<select name="timespan" id="timespan" class="Wdate">
<option value="1">8:00--9:00</option>
<option value="2">9:00--10:00</option>
<option value="3">11:00--12:00</option>
</select>
<hr>
<input type="text" name="" id="" value="666"/>
<button>提交</button>
</form>

    jQuery部分

<script type="text/javascript">
$(document).ready(function () {
console.log($(':radio'));
console.log($(':checkbox'));
// 1、获取单选框中的value值
console.log($('input[type=radio]:checked').val()); // // 2、对于复选框中的value值,仅仅获取第一个值
console.log($('input[type=checkbox]:checked').val()); // a // 3、下拉列表被选中的值
var obj = $('#timespan option:selected');
console.log(obj.val()); // // 设置单选的值
$('input[type=radio]').val(['1']); //将默认值改为1(初始时是2)
$('input[type=checkbox]').val(['b','c']); // 将默认选中的值改为‘b’和'c'(初始时是'a','b','c') // 文本框 设置值和获取值
$('input[type=text]').val(['在此输入额!']);
console.log($('input[type=text]').val()); })
</script>

二、jQuery文档操作

    HTML部分 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery文档操作-插入节点</title>
</head>
<body>
<a href="#">我是一个超链接</a>
<a href="#">我是又一个超链接</a>
<ul> </ul>
<button>按钮</button>
<h2>我是一个二级标题</h2> </body>
<script src="../jquery-3.2.1.js"></script>
<script type="text/javascript">
// jQuery代码部分
</script>
</html>

  jQuery代码部分  

  1、插入操作   

$(document).ready(function(){
//------------ 方法一:append() ------------------------------
/*
父元素.append(子元素),即在父元素下追加某新元素
*/
// 插入节点方法1:append("字符串")
$("ul").append("<li>我是一个新的li标签</li>") // 插入节点方法2:先创建子元素,再将其添加到父元素上
var dom_li = document.createElement("li");
dom_li.innerHTML = "我是添加的第二个标签";
$("ul").append(dom_li); // 插入节点方法3:通过jQuery元素添加(即移动当前页面中已存在的元素到父元素下,则被移动元素将从原位置上消失,等同于移动操作)
$("ul").append(a); // ------------- 方法二:appendTo() ----------------------------
// 子元素.appendTo(父元素),即子元素主动添加到父元素上
$("<li>我是第三个li标签</li>").appendTo($("ul").addClass("oli-3")); // ------------- 方法三:prepend() 前置添加,即添加到父元素的第一个位置----------------------------
$("ul").prepend("<li>我是最开始的li标签</li>");
// prependTo() 后置添加,即将元素添加到父元素下第一个位置
$("<a>我是最开始的超链接</a>").prepend("ul");
// ------------- 方法四:父.after(子) 在匹配的元素之后插入内容,与之相对还有 ---> 子.insertAfter(父) ----------------
$("ul").after("<h4>我是一个四级标题</h4>");
$("<h5>我是一个5级标题</h5>").insertAfter("h4");
})

  2、复制操作 --- clone()   

$("button").click(function(){
// clone() 括号内内容不写时,默认克隆匹配的DOM元素并且选中这些克隆的副本(不包括事件)
$(this) .clone().insertAfter($(this));
// clone(true) 元素以及所有的事件处理并且选中这些克隆的副本(即副本和本体一样,无区别)
$(this).clone(true).insertAfter($(this)); })

  3、替换操作  

// replaceWith() ---- 将所有匹配的元素替换成指定的HTML或DOM元素
$("h2").replaceWith($("<h5>我是一个5级标题</h5>")) // replaceAll() ---- 用指定的元素替换所有selector匹配到的元素
$("<button>替换</button>").replaceAll("a");

  4、删除操作

// remove() 删除节点后,事件也会随之删除(即删除了整个标签)
$("ul").remove(); // detach() 删除节点后,事件会保留
var $btn = $("button").detach();
$("ul").append($btn); // 此时按钮添加到了ul中
console.log($btn); // empty() 清空元素中所有后代节点
$("ul").empty();

回到顶部↑