一.jQuery属性操作

1.prop()

a.获取属性值

b.设置属性值

c.自定义属性值获取

2.数据缓存

3.jQuery内容文本值

a.普通元素内容

b.普通元素文本内容

c.获取设置表单值

d.截取字符串

e.返回指定祖先元素

f.保留小数位

g.删除数组元素

一.jQuery属性操作

1.prop()

这个方法对应着原生JS的setAttribute()方法

prop()是用来设置或者获取元素固有属性值的，比如超链接标签的href属性，input标签的type属性，我们还可以获取并设置单复选按钮的的checked属性

a.获取属性值

prop('属性')

b.设置属性值

prop('属性','属性值')

<body><input type="checkbox" name="" id="">
</body>
<script>$("input").on('change',function(){console.log($(this).prop("checked"))})
</script><!--我们还可以使用':checked'选择器来做出更多的操作-->

c.自定义属性值获取

不过有一种情况我们是不能使用prop()方法的：

那就是自定义属性，比如index，这个自定义属性我们使用prop()方法无法获取

自定义属性我们可以使用attr()方法：

attr('属性')//对标原生JSgetAttribute()

<body><input type="checkbox" name="" id="" index="1">
</body>
<script>$("input").attr("index","2")
</script>

2.数据缓存

element.data()

data里面的数据会直接存放到元素内存中（把元素当成一个对象）

$("input").data('username','小蜗')
console.log($('input'))

我们发现这条数据在DOM中是看不到的，但是却存放在了这个元素中，可以输出

3.jQuery内容文本值

a.普通元素内容

//获取
html()//修改设置
html("内容")//对标原生JS:innerHtml()

<body><div>hello-jQuery</div>
</body>
<script>$("div").html("你好-jQuery")console.log($("div").html())
</script>

b.普通元素文本内容

text()//对标原生JS：innerText()

<body><div>hello-jQuery</div>
</body>
<script>$("div").text("你好-jQuery")console.log($("div").text())
</script>

c.获取设置表单值

val()//获取
$(input").val()//修改设置
$("input").val("内容")

d.截取字符串

substr(数字型)//从第几个开始截取

<body><div>hello-jQuery</div>
</body>
<script>$("div").text("你好-jQuery")console.log($("div").text().substr(3))
</script>

e.返回指定祖先元素

parents("选择器")

<body><header>hello-hello-hello<div>hello-jQuery</div></header>
</body>
<script>console.log($("div").parents("header")[0])
</script>

f.保留小数位

let num1 = 1.3471837498134
let num2 = 0.437413274713284
console.log((num1 - num2).toFixed(2))

g.删除数组元素

splice(从哪个位置开始删除，删除几个元素)

const arr = [1,3,4134,413143,414,43,5875,8678,8576,57567]
arr.splice(1,9)
console.log(arr);

jQuery属性操作以及一些实用方法相关推荐

jQuery 属性操作 - addClass() 和 removeClass() 方法
实例向第一个 p 元素添加一个类: $("button").click(function(){$("p:first").addClass("intr ...
JQuery中操作Css样式的方法
JQuery中操作Css样式的方法 <strong>//1.获取和设置样式</strong> $("#tow").attr("class&q ...
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
web前端----jQuery属性操作
知识点总结 1.属性属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
[jQuery原理] jQuery属性操作相关方法
属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...
jQuery 属性操作 - toggleClass() 方法
实例对设置和移除所有元素的 "main" 类进行切换: $("button").click(function(){$("p").togg ...
jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr():  <!--属性:在元素里面写的,用attr方法操作.--& ...
jQuery属性操作之.val()
文章目录 .val()实例方法的三种用法 .val()函数源码调用形式:$('xxx').val(); 调用形式:$('xxx').val(value); 调用形式:$('xxx').val(fun ...

jQuery属性操作以及一些实用方法

一.jQuery属性操作

1.prop()

a.获取属性值

b.设置属性值

c.自定义属性值获取

2.数据缓存

3.jQuery内容文本值

a.普通元素内容

b.普通元素文本内容

c.获取设置表单值

d.截取字符串

e.返回指定祖先元素

f.保留小数位

g.删除数组元素

jQuery属性操作以及一些实用方法相关推荐

最新文章

热门文章