web前端----jQuery属性操作

知识点总结

1、属性    属性（如果你的选择器选出了多个对象，那么默认只会返回出第一个属性）、

        attr(属性名|属性值)            - 一个参数是获取属性的值，两个参数是设置属性值            - 点击加载图片示例        removeAttr(属性名)            -删除属性的值        prop(属性名|属性值)            - 属性的返回值的是布尔类型            - 单选，反选，取消的例子        removeProp(属性名)            -删除属性的值

    循环：each（两种循环示例）        - $.each(数组/对象, function(i, v){})      - $("div").each(function(){})    CSS类        - addClass 添加类属性        - removeClass 移除类属性        - toggleClass 开关|切换（有就移除，没有就添加）          灯泡的例子    HTML代码/文本/值        没有参数就是获取对应的值，        有参数就设置对应的值        - .html()  添加html标签    .html("<span>啦啦啦。</span>")        - .text()  添加文本        .text("啦啦啦。")        - .val()            input :一个参数,获取的是input框里面的值            checkbox :一个参数，获取的是value的值            select :                单选：获取值                多选：得到的是一个数组，设置的时候也要是数组

注意：

在1.x及2.x版本的jQuery中使用attr对checkbox进行复制操作时会出bug，在3.x版本的jQuery中则没有这个问题。为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked")。

<input type="checkbox" value="1">
<input type="radio" value="2">
<script>$(":checkbox[value='1']").prop("checked", true);$(":radio[value='2']").prop("checked", true);
</script>

示例：全选、反选、取消

一、属性操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性示例</title>
</head>
<body>
<img src="Bootstrap_i1.png" alt="">
<table border="1"><tbody><tr><td>1</td><td>武侠</td><td>销售部</td></tr><tr><td>2</td><td>哎哎呀</td><td>财经部</td></tr></tbody>
</table>
<form action=""><input type="checkbox"><input type="checkbox"><input type="checkbox"><input type="radio"><select name="" id=""><option value="">甘肃</option><option value="">兰州</option><option value="">永登</option><option value="">天水</option><option value="">庆阳</option></select>
</form>
<script src="jquery-3.2.1.min.js"></script>
<script>
//    $("img").attr("src","Bootstrap_i3.png");
//    $("table").attr("aaa");
//    $("table").attr("aaa","按时");
</script>
</body>
</html>

示例

二、示例图片

　1、attr

　　(1)得到属性和设置属性值

　 (2)设置自定义属性值

　　2、removeAttr

　　3、prop

　　4、removeProp

三、jquery中的循环的两种方式

//    方式一li = [11,22,33];$.each(li,function (i,v) {console.log(i,v)// 0 11// 1 22// 2 33})
//    方式二$(".c1").each(function (i,v) {console.log(i,v)  //这里的v拿到的是标签
//         0 <div class="c1">hah</div>
//         1 <div class="c1">年</div>
//         2 <div class="c1">娃的</div>console.log(v.innerText)  //拿到文本})
</script>

退出循环============================

三、注意的一个下问题：

解决方法

转载于:https://www.cnblogs.com/TheLand/p/8572831.html

web前端----jQuery属性操作相关推荐

Web前端——jQuery库
Web前端笔记第七部分:jQuery 1. jQuery介绍 jQuery是目前使用最广泛的javascript函数库. 据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库 ...
Web前端 jQuery
1.初始jQuery 1.1.jQuery是什么? jQuery由美国人John Resig于2006年创建,jQuery 是一个快速.简洁的 JavaScript 库,其设计的宗旨是"wr ...
Web前端JQuery面试题（三）
Web前端JQuery面试题(三) 1.怎么阻止冒泡过程? stopPropagation(); // 阻止冒泡过程 2.ready()方法和onload()方法的区别? onload()方法要等页面 ...
jQuery属性操作以及一些实用方法
目录一.jQuery属性操作 1.prop() a.获取属性值 b.设置属性值 c.自定义属性值获取 2.数据缓存 3.jQuery内容文本值 a.普通元素内容 b.普通元素文本内容 c.获取设置表 ...
jQuery—常用API（jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作）
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
WEB前端-背景属性
WEB前端-背景属性 WEB前端-背景属性背景属性 1.背景颜色 2.背景图片 3.设置背景图片是否平铺 4.设置背景图片位置 5.设置背景图片大小 6.设置背景是否受滚动条的影响 7.背景颜色渐变 ...
WEB前端.jQuery
持续更新呢,莫(mo)急(yu)....ヽ(￣▽￣)ﾉヽ(￣▽￣)ﾉ后续会补全代码块注释,并加入body标签内容篇首节 README: 定位:WEB前端目的:适合有jQuery知识基础萌新阅读. ...
Web前端JQuery入门实战案例
前端jquery入门到实战为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...
Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...

web前端----jQuery属性操作

web前端----jQuery属性操作相关推荐

最新文章

热门文章