JQuery(2)

微信扫一扫,分享到朋友圈

JQuery(2)

JQuery属性操作

元素固定属性值prop()

所谓的元素的固定属性就是元素自带的属性,如a链接中的href属性

语法

元素自定义属性值attr()

用户自己给元素设置的属性,称为自定义属性

注意:该方法也可以直接获取自定义属性

数据缓存data()

data()方法可以指定元素上设置属性,但不会修改DOM结构,一旦页面被重新刷新,之前存放的数据都会被移除

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery属性操作</title>
<script src="https://www.tuicool.com/articles/jquery-3.5.1.js"></script>
</head>
<body>
<a href="https://www.baidu.com/">百度</a>
<input type="checkbox" name="" id="" checked>
<div index='2' date-index='2'>DIV</div>
<span>SPAN</span>
<script>
$(function () {
// 1.获取元素固有属性值
console.log($('a').prop('href'))
$('a').prop('title', 'baidu')
$('input').change(function () {
console.log($('input').prop('checked'))
})
//2. 获取元素自定义的属性
console.log($('div').attr('index'))
console.log($('div').attr('index', "4"));
console.log($('div').attr('date-index'))
// 3.数据缓存  里面的数据是存放在内存里面
$('span').data('name', "尧子陌");
console.log($('span').data('name'))
})
</script>
</body>
</html>

JQuery获取文本值

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery获取文本值</title>
<script src="https://www.tuicool.com/articles/q2u6Z3F/jquery-3.5.1.js"></script>
</head>
<body>
<div>
<span>hello word</span>
</div>
<input type="text" value="请输入内容">
</body>
<script>
console.log($('div').html()) //获取div里面的内容;
$('div').html('Zero');
console.log($('input').val());//打印表单里面的内容
$('input').val('520')
</script>
</html>

返回指定的祖先元素

在JQuery中,可以通过parents()的方法来获取指定的祖先元素,参数可直接写祖先元素的名字

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回指定的祖先元素</title>
<script src="https://www.tuicool.com/articles/jquery-3.5.1.js"></script>
</head>
<body>
<div>
<div>
<div>123</div>
</div>
</div>
<script>
$(function() {
console.log($('.son').parents('.container'));
console.log($('.son').parents('.father'));
})
</script>
</body>
</html>

遍历元素

在JQuery中,隐式迭代只是对相同的元素做了同样的操作,如果想要给同一类元素做不同的操作,则需要用到遍历

常规遍历

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery遍历元素</title>
<script src="https://www.tuicool.com/articles/q2u6Z3F/jquery-3.5.1.js"></script>
</head>
<body>
<div>22</div>
<div>44</div>
<div>66</div>
<script>
$(function () {
//第一种遍历方法
var arr = ['yellow', 'red', 'pink']
var sum = 0;
//两个参数 i指的是索引号  ele指的是元素对象
$('div').each(function (i, ele) {
console.log(i) //打印索引号
console.log(ele) //打印元素对象
$(ele).css('backgroundColor', arr[i]);
sum += parseInt($(ele).text());
})
console.log(sum)
})
</script>
</body>
</html>

$.each()遍历

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$.each遍历</title>
<script src="https://www.tuicool.com/articles/jquery-3.5.1.js"></script>
</head>
<body>
<script>
$(function() {
var arr = ['yellow', 'red', 'pink'];
//遍历数组
$.each(arr, function(i, ele) {
console.log(i);
console.log(ele)
})
//遍历对象
$.each({
name: "尧子陌",
age: 18
}, function(i, ele) {
console.log(i);
console.log(ele)
})
})
</script>
</body>
</html>

创建 删除 添加元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建 删除 添加元素</title>
<script src="https://www.tuicool.com/articles/q2u6Z3F/jquery-3.5.1.js"></script>
</head>
<body>
<ul>
<li>快乐的天使</li>
</ul>
<span>hello</span>
<p>段落</p>
<script>
$(function() {
// 内部操作
var li = $("<li>创建的元素</li>");
var li2 = $('<li>第二次创建的元素</li>')
$('ul').prepend(li);
$('ul').append(li2)
})
// 外部操作
var box = $('<div>Word</div>');
var box2 = $("<div>尧子陌</div>");
$('span').after(box)
$('span').before(box2);
// 删除元素
$('p').empty()
</script>
</body>
</html>

微信扫一扫,分享到朋友圈

JQuery(2)

[业界方案]用Jaeger来学习分布式追踪系统Opentracing

上一篇

科学家在“3D芯片大脑”上建模 还要复制人体系统

下一篇

你也可能喜欢

JQuery(2)

长按储存图像,分享给朋友