![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
jQuery是一个快速，简洁的JavaScript库，座右铭：少写，多做。
<body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>// 1. $(筛选器) : 获取dom对象,相当于document.querySelectorAllconsole.log($('ul'));// 2. $(dom对象) : 把dom对象转化为jQuery对象console.log($(document.body) instanceof jQuery);// 3. $(html文本) : 创建dom元素,返回为jQuery对象$("<h2>Hello World</h2>").insertBefore($('ul'));// 4. $(callback) :当dom树加载完成后的回调$(() => $('h3').css('color', 'red'));</script><h3>bye,bye</h3></body>
attr(name, value) : 属性操作,单参数时是获取 同比:getAttribute, 双参数是设置 同比: setAttribute,设置多个属性时可使用对象传参removeAttr() : 移除属性 同比: removeAttribute
<body><ul name='lists' id="ul1" style="border: 1px solid #000;"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>const ul = $('ul');const li = $('li');// 获得属性console.log(ul.attr('name'));// 设置属性ul.attr('name', 'test');console.log(ul.attr('name'));// 多属性设置ul.attr({ 'name': 'test2', 'id': '1', 'data-index': 'shop' });console.log(ul.attr('id'));// 删除属性ul.removeAttr('id');console.log(ul.attr('id'));</script>
css(name, value) : 样式操作,单参数时是获取 同比:style, 双参数是设置 同比: style.name = value,设置多个属性时可使用对象传参
<body><ul name='lists' id="ul1" style="border: 1px solid #000; color: lightgreen;"><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>const ul = $('ul');// 获取样式console.log(ul.css('color'));// 设置样式$('li:nth-of-type(1)').css('backgroundColor', 'yellow');// 设置多个样式$('li:nth-of-type(2)').css({ 'font-size': '20', 'backgroundColor': 'red' });</script>
addClass(name) : 添加样式类 同比:classlist.addremoveClass(name) : 删除样式类 同比:classlist.removehasClass(name) : 判断是否有某个样式类 同比:classlist.containstoggleClass(name) : 切换样式类 同比:classlist.toggle
<style>.error {background-color: red;}.warning {background-color: orange;}</style><body><ul><li>item1</li><li class=" warning">item2</li><li>item3</li><li>item4</li><li>item5</li></ul></body><script>// 添加样式类$('li:nth-of-type(1)').addClass('error');// 删除样式类$('li:nth-of-type(2)').removeClass('warning');// 判断是否有类console.log($('li:nth-of-type(2)').hasClass('warning'));;// 切换样式类$('li:nth-of-type(2)').on('click', function () {$(this).toggleClass('warning');});</script>
val() : 获取或者设置表单元素的value属性的值,无参获取, 有参数是设置html() : html文本处理 无参获取, 有参数是设置 同比: innerHTMLtext() : 文本处理 无参获取, 有参数是设置 同比:textContent
<body><form action=""><label for="" id="userlab">用户名:</label><input type="text" id="username"><label for="" id="pwdlab">密码:</label><input type="password" id="password"><div id='btn'></div></form></body><script>// 设置value$('#username').val('php.com');// 获得valueconsole.log($('#username').val());// 获得textconsole.log($('#userlab').text());// 设置text$('#pwdlab').text('password');// 设置html文本$('#btn').html('<Button type="button">提交在此</Button>');</script>
因为jQuery的限制性,无法完全替换js的一些操作或方法.需要将jQuery对象转为js对象.
jQuery对象转换成DOM对象：
jQuery对象.get(索引值);
jQuery对象[索引值]
jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：
$(DOM对象) 只有这一种方法;
<style>.cur {color: lightcoral;}.pre {color: lightgreen;}</style><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li></ul><script>// 同比于jQuery的addClass$('li')[3].classList.add('cur');$('li:nth-of-type(2)').addClass('pre');</script></body>