网站建设开发服务费记账,培训网站免费,建站工具免费,什么网站做推广好jQuery 提供了一些属性操作的方法#xff0c;主要包括 prop()、attr() 和 data() 等。通过这些方法#xff0c;能够实现不同的需求。下面我们分别进行详细讲解。 1.prop() 方法
prop0 方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性#xff0c;如 … jQuery 提供了一些属性操作的方法主要包括 prop()、attr() 和 data() 等。通过这些方法能够实现不同的需求。下面我们分别进行详细讲解。 1.prop() 方法
prop0 方法用来设置或获取元素固有属性值。元素固有属性是指元素本身自带的属性如 标签的 href 属性。具体语法示例如下
$(selector).prop(属性名) //获取属性值
$(selector).prop(属性“,“属性值) //设置属性值下面我们通过代码演示 prop() 方法的使用。
a hrefhttp://localhost title主页/a
scriptconsole.log($(a).prop(href)); //输出结果http://localhost$(a).prop(title,首页); //设置title的值为“首页”
/script在上述代码中第 3 行代码用于获取 标签的 href 属性输出到控制台中。第 4 行代码用于设置 a 标签的 title 属性将属性值设为 “首页”。
在开发中还会经常使用 prop(‘属性’) 获取表单元素的 checked 值示例代码如下
input typecheckboxchecked
script//获取表单元素的checked值$(input).change(function() {console.log($(this).prop(checked)); //复选框选中时,输出结果为true});
/seript上述代码中第 1 行代码设置了 input 的 type 值为 checkbox表示复选框。第 4 行代码给 input 绑定了 change 事件当表单元素状态发生变化时触发。如果复选框处于选中状态则输出结果为 true否则输出 false。
2. attr() 方法
Attr() 用来设置或获取元素的自定义属性自定义属性是指用户给元素添加的非固有属性。例如给 div 添加 index 属性保存元素的索引值。具体语法如下。
$(selector).attr(属性名) // 获取属性值
$(selector).attr(”属性, “属性值“) // 设置属性值下面我们通过代码演示 attr() 方法的使用如下所示。
div index1 data-index2我是div/div
scriptconsole.log($(div).attr(index)); // 输出结果1console.log($(div).attr(data-index)); // 输出结果2$(div).attr(index, 3); // 设置index的属性值为3$(div).attr(data-index, 4); // 设置data-index属性值为4
/script在上述代码中div 的 index 属性是一个普通的自定义属性data-index 是 HTML5 的自定义属性 (以“data-” 开头)使用 atr()方法都可以进行设置或获取。需要注意的是自定义属性无法使用 prop()设置和获取。
3. data() 方法
data() 方法用来在指定的元素上存取数据。数据保存在内存中并不会修改 DOM 元素结构; 一旦页面刷新之前存放的数据都将被移除。具体语法如下
$(selector).data(数据名) // 获取数据
$(selector).data(数据名数据值) // 设置数据下面我们演示通过 data() 方法实现数据的操作示例代码如下。
div我是div/div
script$ (div).data(uname,andy); // 设置数据console.log ($(div).data(uname)); // 获取数据输出结果andy
/script上述代码运行后umame 会保存到内存中不会出现在 HTML 结构中。
使用 data() 方法还可以读取 HTML5 自定义属性 data-index示例代码如下
div index1data-index2我是div/div
scriptconsole.log($(div).data(index))//输出结果2
/script在上述代码中第 3 行用来获取 data-index 属性属性名中不需要 “data-” 前缀并且返回的结果是数字型。
