PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

博客列表 > jQuery参数四种类型-getter|setter方法

jQuery参数四种类型-getter|setter方法

葡萄枝子
葡萄枝子 原创
2021年01月13日 00:17:30 608浏览

jQuery参数四种类型-getter|setter方法

  1. 实例演示$()函数的四个参数;
  2. 将课堂上提及的所有getter/setter方法全部上机做一遍

1. 实例演示$()函数的四个参数

$()的参数的四种类型

  1. 选择器
  2. 原生js对象,(包装器功能)
  3. html字符串, 创建dom元素
  4. 回调函数,在页面加载完成,dom树创建成功后自动调用
  • body 中添加
  1. <!-- 引入 jQuery 库 -->
  2. <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  3. <ul class="list">
  4. <li class="first">item1</li>
  5. <li class="second">item2</li>
  6. <li class="last">item3</li>
  7. </ul>
  • $()的参数的四种类型
  1. // 实例演示$()函数的四个参数
  2. // 1. 选择器
  3. // $(selector)
  4. console.log($('.list>li').get(0));
  5. // $(selector, context)
  6. console.log($('li', '.list').get(0));
  7. // 2. 原生js对象, (包装器功能)
  8. let first = document.querySelectorAll('.list>li');
  9. console.log($(first).get(0));
  10. // 3. html字符串, 创建dom元素
  11. // item4 追加到第一个列表下
  12. let item4 = $("<li class=\"four\">item4</li>");
  13. item4.appendTo('.list');
  14. // 4. 回调函数, 在页面加载完成, dom树创建成功后自动调用
  15. $(function () {
  16. // 删除第一个列表上一步追加的 item4
  17. $('.list li').last().remove();
  18. });
  • 上面,第1和2,控制台输出列表下第一个元素,第3追加item4到列表中,第4删除最后添加的元素

jQuery参数的四种类型

2. 将课堂上提及的所有getter/setter方法全部上机做一遍

  • attr() 设置属性
    • attr(name) 获取属性
    • attr(name, value) 设置属性
    • attr(callback) 回调函数
  1. // 返回列表第2个class值,为 second
  2. console.log($('.list li').eq(1).attr('class'));
  3. // 修改列表第2个class值改为test
  4. $('.list li').eq(1).attr('class', 'test');
  5. // 返回 test
  6. console.log($('.list li').eq(1).attr('class'));
  7. // 回调方法,改回 second
  8. $('.list li').eq(1).attr('class', () => 'second');
  9. console.log($('.list li').eq(1).attr('class'));

attr属性方法

  • css() 设置元素的行内样式
    • css(name): getter
    • css(name, value): setter
    • css(name, callback): callback
  1. // 第一个字体改为红色,背景黄色
  2. $('.list li').first().css({'color': 'red', 'background-color': 'yellow'});
  3. // 获取背景色值,返回黄色的 rgb 值 rgb(255, 255, 0)
  4. console.log($('.list li').first().css('background-color'));
  5. // 回调方法,最后一个元素随机三种背景色
  6. $('.list li.last').css('background-color', () => {
  7. let colors = ['red', 'green', 'blue'];
  8. let rand = Math.floor(Math.random()*colors.length);
  9. return colors[rand];
  10. });

设置元素的行内样式

  • val() 元素的值, 设置表单控件的value属性
    • val(): getter
    • val(value): setter
    • val(valcallback): callback

body 中添加一个表单控件

  1. <input type="text" name="text_name" value="text_value" />

script 标签中续写 js

  1. // 获取 text_name 的值,返回 text_value
  2. console.log($('input[name="text_name"]').val());
  3. // 设置 text_name 的值为 text_test
  4. $('input[name="text_name"]').val('text_test');
  5. // 返回 test_test
  6. console.log($('input[name="text_name"]').val());
  7. // 回调函数改回 text_value
  8. $('input[name="text_name"]').val(() => 'text_value');
  9. // 返回 text_value
  10. console.log($('input[name="text_name"]').val());

元素表单控件属性值

  • text(): innerText / textContent

    • text(): gettertext
    • text(text): setter
    • text(valcallback): callback
  • html(): innerHTML

    • html(): getterhtml
    • html(html): setter
    • html(valcallback): callback
  1. // 获取列表第二个的文本,返回 item2
  2. console.log($('.list li.second').text());
  3. // 设置文本,不被解析
  4. $('.list li.second').text('<strong>item2-text</strong>');
  5. // 设置html,被加粗解析
  6. $('.list li.second').html('<strong>item2-html</strong>');
  7. // 获取列表第二个的html,返回 <strong>item2-html</strong>
  8. console.log($('.list li.second').html());
  9. // 获取列表第二个的文本,返回 item2-html
  10. console.log($('.list li.second').text());
  11. // 回调改为 html 加粗斜体
  12. $('.list li.second').html(() => '<strong><em>item2-html</em></stong>');

text|html值

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议