jQuery基本的getter/setter操作
attr()方法: 获取/设置元素属性值.
- 1.1
jQuery对象.attr(参数名): 获取参数值, 入参为参数名; - 1.2
jQuery对象.attr(参数名, 参数值): 设置参数值, 入参1是参数名, 入参2是参数值; - 1.3 入参为只有属性的js对象: 同时设置多个属性值.
jQuery对象.attr({prop1: val1,prop2: val2,...});
- 1.4
jQuery对象.attr(参数名, 回调函数): 把回调函数的返回值设置为参数的值, 即, 动态为属性设置值.
css()方法: 获取获取元素的最终样式(即, 计算样式); 设置元素的css样式.
css()的使用方法跟attr()类似, 如:jQuery对象.css(css属性名),jQuery对象.css(css属性名, 属性值),jQuery对象.css(字面量js对象),jQuery对象.css(css属性名, 回调函数). 相关解释见attr().
val(): 获取/设置jQuery对象封装的元素的值(value属性值).
jQuery对象.val(): 获取value属性值;jQuery对象.val(值): 设置value属性值;jQuery对象.val(回调函数): 动态设置value属性值.
html()/text(): 元素内容获取/设置操作
html()方法跟JS原生的element.innerHTML对应, 浏览器会解析他们的值中的HTML标签, 再输出;text()方法跟JS原生的element.innerText对应, 浏览器会原样输出他们的值;
data()/removeData(): 获取,设置/移除自定义属性.
tips: 所有setter操作, 参数都可以试试: 普通参数值, 字面量对象, 回调函数赋值
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基本的getter/setter操作-1</title><!-- CDN方式引用, 即内容分发方式 --><!-- BootCDN或者又拍云的CDN的速度都可以 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><!-- 本地引用 --></head><body><h3>登录</h3><form action="hello.php" method="POST"><div class="item-box"><label for="username">姓名:</label><input type="text" name="username" id="username"></div><div class="item-box"><label for="username">邮箱:</label><input type="email" name="email" id="email" value="grantkai@qq.com"></div><div class="item-box"><label for="remember_0">记住我:</label><input type="radio" name="remember" id="remember_0" checked><label for="remember_0">保存</label><input type="radio" name="remember" id="remember_1"><label for="remember_1">放弃</label></div></form></body><script>var cl = console.log.bind(console);// 获取表单元素var form = $('form');cl(form);// 1. attr()方法: 获取/设置元素属性值/* 1.1 只有一个入参, 为读取, 入参为属性名 *//* 获取form元素的action属性的值 */cl(form.attr('action'));/* 1.2 两个入参, 为设置, 入参1位属性名, 入参2位属性值 */form.attr('action', 'hi.php');cl(form.attr('action'));/* 1.3 修改多个属性值, 入参一个js对象, 对象中的属性是要被修改的属性 */form.attr({action: 'sayHello.php',method: 'GET'});/* 1.4. 入参2也可以是回调函数 */form.attr('action', function() {// 获取当前请求方式, 如果是GET请求, 则执行查询脚本'query.php'; 如果是非GET请求, 则执行注册脚本:`register.PHP`// 获取当前表单的method属性值, 并转为小写var method = $(this).attr('method').toLowerCase();if('get' == method) {return 'query.php';} else {return 'register.php';}});// 2. css()方法: 针对HTML元素的style属性进行操作. 而它不止能获取到style属性的值, 还能获取到该元素所有的样式// 包括: 元素的style属性指定的样式(又叫内联样式)/元素默认样式/HTML文件中<style>标签定义的样式/外部css文件定义的样式.../* tips: 获取元素的最终样式(即, 计算样式) *//* 使用js原生方式获取 */// cl(window.getComputedStyle(document.forms.item(0).width));/* 使用jq获取 */cl(form.css('width'));cl(form.css('border'));// 设置样式form.css('border', '5px solid green');/* 支持字面量对象入参设置多个样式属性 */form.css({backgroundColor: "wheat",border: "5px dashed blue"});/* 也支持回调 *//* 每执行一次, 背景色随机发生变化 */form.css('background-color', function() {// 颜色数组var bgcolor = ['orange', 'orangered', 'tan', 'lime'];// 使用Math.random()生成0-1的随机数, 乘以4后, 就能生成0-4之间的随机数, 然后在用Math.floor()向下取整var index = Math.floor(Math.random() * bgcolor.length);return bgcolor[index];});// 3. val(): 获取/设置表单元素的值(value属性值)/* 获取 */cl($('#email').val());/* 设置 */cl($('#email').val('grantkai@qq.com'));/* 获取选中radio的值 */cl($('input:radio[name=remember]:checked').val());/* 回调 */cl($('#email').val(function() {return this.defaultValue;}));// 4. html()/text(): 元素内容操作/* 原生方法 */document.querySelector('h3').innerText = '请登录';/* jq */$('h3').text('请登录1');// js中的innerText属性对应jq中的text()方法, 浏览器会原样输出他们的值// jq中的innerHTML属性对应jq中的html()方法, 浏览器会解析他们的值中的HTML标签, 再输出$('h3').text('<span style="color: green">变绿</span>');// $('h3').html('<span style="color: green">变绿</span>');// 自定义数据属性/* 增加data-desc自定义属性, 并把其值设置为'login-form' */// 貌似并没有在开发这种局的"元素"页签中显示出来, 但是是可以获取到的, 也就是说是设置成功了的$(form).data('desc', 'login-form');/* 获取自定义数据属性的值 */cl($(form).data('desc'));/* 移除 */cl($(form).removeData('desc'))/* 此时再获取data-desc自定义数据熟悉的值, 就获取不到了(undefined) */cl($(form).data('desc'));</script></html>
jQuery中的DOM操作
- 创建和插入元素
$(元素标签文本): 根据传入的标签文本, 创建对应的元素, 可带有属性.$(元素标签文本, 元素属性字面量对象): 可以把元素的属性以字面量对象的形式传入第二个参数, 创建的元素将设置有这些属性.
- 插入元素
父元素.append(子元素): 在父级元素上调用, 向里面插入元素. 参数可以是HTML元素的js对象, 封装HTML元素的jQuery对象和元素标签文本. 如果是是元素标签文本, 则先创建对应的元素, 再插入到父元素中.子元素.appendTo(父元素): 在子元素上调用, 把子元素添加到父元素中. 若父元素参数为选择器文本, 则以选择器文本查询到匹配的元素作为父元素.父元素.append(回调函数): 将在父元素中插入回调函数返回的元素.- 插入方式
兄弟元素.before(新元素): 在某个兄弟元素前插入;新元素.insertAfter(兄弟元素): 在某个兄弟元素后插入;新元素.prependTo(父元素): 新元素将作为父元素中的第一个子元素插入.
元素替换
当前元素.replaceWith(新元素): 用新元素替换当前元素;新元素.replaceAll(被替换的元素): 用新元素替换指定元素;
tips: 所有函数的参数, 都可以试试这几种值: HTML片段文本, js对象, jQuery对象, 回调函数.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery中的DOM操作</title><!-- CDN方式引用, 即内容分发方式 --><!-- BootCDN或者又拍云的CDN的速度都可以 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><!-- 本地引用 --><style>.active {color: red;}</style></head><body></body><script>var cl = console.log.bind(console);// 1. 元素的插入与替换// 1.1 append(元素字符串): 在父级元素上调用, 向里面插入元素$('body').append('<ol>');// $('body').append('<ol>');// 1.2 子元素.appendTo(父元素): 把子元素添加到父元素中, appendTo()是在子元素上调用$('<li>').text('笔记本电脑').appendTo('ol');$('<li>').text('智能手机').addClass('active').appendTo('ol');$('<li>').html('<a href="">格子衫</a>').addClass('active').appendTo('ol');$('<li>', {id: 'hello',style: 'background-color: yellow'}).html('<a href="">游戏机</a>').appendTo('ol');/* append(回调) *//* 用回调循环生成子元素 */$('ol').append(function() {var res = '';for(var i = 0; i < 5; i++) {res += '<li><a href="">最新商品' + (i + 1) + '</a></li>';}return res;});// 从第3个元素前面增加一个<li>/* befor(): 在当前元素前添加兄弟元素 */$('ol li:nth-of-type(3)').before("<li>新元素</li>");/* 把新元素2的<li>添加到第4哥<li>后面 */$('<li>新元素2</li>').insertAfter($('ol li:nth-of-type(4)'));// prepend()/prependTo(): 把新元素插入到父容器中的第一个位置$('<li>最新留言</li>').prependTo('ol')// 元素替换// 当前元素.replaceWith(新元素); 新元素.replaceAll(当前元素)$('ol > li:last-of-type').replaceWith('<li>商品元素五</li>');// ↑↓表达式效果一样$('<li>商品元素五</li>').replaceAll('ol > li:last-of-type');</script></html>
jQuery常用的过滤器
过滤器并不是必须的, 可以用复杂的选择器来实现”相对简单的选择器+过滤器”的效果. 但”选择器+过滤器”可读性好, 先选择, 再过滤. 过滤器的返回结果也是jQuery对象.
- 在选择器查询到的元素中过滤
filter(selector): 在选择器查询结果中再次筛选过滤.first(): 返回选择器查询结果的第一个元素.last(): 返回选择器查询结果的最后一个元素.eq(index): 返回选择器查询结果中指定索引的元素.slice(start, end + 1): 返回选择器查询结果中元素索引从start到end的元素
- 在选择器查询到的元素的子元素/后代元素中过滤
children(): 返回选择器查询结果的所有子元素. 等效于js中的children属性. 但children()可以返回多个元素的子元素, 而children属性只能返回当前元素的子元素.find(selector): 在选择器查询结果的后代元素中再次筛选过滤.
- 可以链式调用多个过滤器.
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery常用的过滤器</title><!-- CDN方式引用, 即内容分发方式 --><!-- BootCDN或者又拍云的CDN的速度都可以 --><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script><!-- 本地引用 --></head><body><ul id="first"><li>item1</li><li>item2</li><ul><li class="red">item1</li><li>item2</li><li>item3</li></ul><li>item3</li><li>item4</li><li>item5</li></ul><ul id="second"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>var cl = console.log.bind(console);// 获取第一个ul/* 方式1: 用选择器 */cl($('ul#first'));/* 方式2: 用选择器+过滤器 *//* 1. filter()过滤器 */cl($('ul').filter('#first'));/* ↑第二种方法, 可读性更好, 先选择, 再过滤, 实现起来也更简单 */// cl($('ul').first());// 2. children(), 等效于js中的children属性/* 第一个ul */var ul1 = $('ul').filter('#first');cl(ul1.children());/* 第一个ul的所有子元素 */var children = ul1.children();/* 3. first(): 获取第一个元素;4. last(): 获取最后一个元素 */children.first().css('background-color', 'red');children.last().css('background-color', 'red');/* 5. eq(index): 第(index+1)个元素 */children.eq(3).css('background-color', 'yellow');// children(选择器)只能获取到子元素, 不能获取到更深层级的元素/* 所有下面的操作, 并不能找到class="red"的元素 */ul1.children('.red').css('color', 'red');// 6. 要获取到所有后代元素, 则用find(选择器)ul1.find('li').filter('.red').css('color', 'red');// 7. slice(start, end+1)过滤范围: 过滤出索引从start到end的元素$('ul').filter('#second').children().slice(1, 3).css('color', 'orange');// 如果选择器学得好, 也可以用选择器直接实现, 过滤器并不是必须的. 但是...可读性是不是很差...$('ul#second>li:nth-of-type(-n + 3):not(:first-of-type)').css('color', 'green');</script></html>
学习心得
- jQuery各种getter/setter操作方法, 参数都可以试试: 普通值参数, 字面量对象参数, 回调函数作为参数;
- jQuery的DOM操作很方便, 感觉比JS原生的DOM操作更灵活.
-过滤器并不是必须的, 可以用复杂的选择器来实现”选择器+过滤器”的效果. 但”选择器+过滤器”可读性好.