标签：

今日内容 js增补 标签属性操纵 // 设置 setAttribute('属性名', '属性值') // input_obj.checked = true; 添加选中效果 // 获取 getAttribute('属性名') // console.log(inputobj.checked); 检察属性值 // 删除 removeAttribute('属性名') class类值操纵 var div1 = document.getElementById('d1'); div1.className; // 获取该标签拥有的类名 div1.classList; // 获取该标签拥有的类名的数组 div1.classList.add('c2'); // 添加类值 div1.classList.remove('c3'); // 删除类值 div1.classList.toggle('c3'); // 有就删除,没有就添加 var t = setInterval("div1.classList.toggle('c3')",1000); //按时器添加 css样式操纵 Document.getElementById(“head1”).style.color=red; js事件绑定 btn_all.onclick = function () { li_list = ul.children; // 获取的dom东西 for (let li of li_list) { console.log(li.firstChild); li.firstChild.checked = true; // js写法 // $(li.firstChild).prop('checked', true); // jquery写法：dom东西转化为jquery东西，然后通过prop设置属性 } }; HTML的label标签增补

将 input 与 label 绑缚起来，让 html 知道你 input 的是什么数据

有一种特效：点击输入框前的文字，可以跳转至框内。

// 两种形式： // 嵌套： <label >用户名: <input type="text" name="username" id="username"></label> // for-id绑缚，非嵌套 <label for="password">暗码: </label> <input type="password" name="password" id="password"> button增补

<button type="submit" id="btn">注册</button>

这个形式的button按钮放在form标签里可以当做input-submit使用

可以跟后端做交互

且，这种内嵌形式的标签可以放图片！

// 普通按钮,没有提交效果 <input type="button"> <button type="button">注册</button> // 下面这两个能够提交form表单数据 <input type="submit" value='登录'> <button type="submit">注册</button> jQuery jquery引入 // 外部网址引入 <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> // 本地文件引入 <script src=http://www.mamicode.com/"jquery.js"></script> //jquery.js本地文件路径 jQuery初识 // jquery东西 var d1 = $('#d1'); --> jQuery.fn.init?[div#d1] // 原生dom东西 var d = document.getElementById('d1'); --><div id='d1'></div> // jquery东西和dom东西之前不能挪用互相的要领 // 但jquery东西和dom东西可以 互相转换 d1[0] // jquery东西 --> dom东西 // d1.eq(0) 这种索引方法得到的就是jquery东西 $(d) // dom东西 --> jquery东西

dom原生东西和jquery东西不能使用对方的要领

两种代码可以混着使用，但东西、要领不能乱使用

选择器 id选择器 $('#d1') -- 同css 类选择器 $('.c1') 元素选择器 $('标签名称') -- $('span') 组合选择器

逗号连接，同时选择多种选择器

$('#d1,.c2') 示例: html代码 <div id="d1"></div> <div class="c2"> 这是c2 </div> css代码: #d1,.c2{ background-color: red; height: 100px; width: 100px; border-bottom: 1px solid black; } jquery代码: $('#d1,.c2').css('background-color','green'); $('#d1,.c2')[1]; -- 索引为1的dom东西 $('#d1,.c2').eq(1); -- 索引为1 的jquery东西

原生dom东西.style.margin-left是不能用的，，带-的要写成原生dom东西.style.marginLeft（驼峰体）

同时设置css的多个值时，以字典形式

层级选择器 // HTML代码： <form> <label>Name:</label> <input name="name" /> <div> <label>Newsletter:</label> <input name="newsletter" /> </div> </form> <input name="none" /> // jquery代码: $("form input") // 功效 $("form input").change(function () { var a = $(this).val(); console.log(a); }); // 当转变前两个框时，城市打印框中输入的值；但最后一个框不会，因为它虽然也是input但它不在form内，不会当选择到。 属性选择器 // html代码: <div class="c1" xx="oo"> 这是啥! </div> // css代码: [xx]{color:red} input标签: type='xx' [type='xx']--对应的input标签 $('[xx]').css('color','green'); $('[xx="oo"]').css('color','pink'); // 设置多个时，需要使用字典的形式。 表单东西属性选择器disable :checked // 找到当选中的input标签 :selected // 找当选中的select标签中的option标签 :enabled // 输入操纵中种种框的默认设置，input（可以输入）、radio、checkbox（可以进行点击选择）、select（可以点开进行选择） :disabled // 使得输入操纵中种种框都禁止被点击（变灰）。 表单选择器type $(":text") // 找到所有input标签 // $(":input") 找到所有input标签 // $(":password") 找到所有input且type=password的标签 // $(":radio") 找到所有input且type=radio的标签 // $(":checkbox") 找到所有input且type=checkbox的标签 html代码: <form action=""> <input type="text" id="username"> <input type="text" id="username2"> <input type="password" id="pwd"> <input type="submit"> </form> jquery代码:找到所有的type=text的input标签 $(':text'); 筛选器要领 html代码 <ul> <li>谢一峰</li> <li class="c1">王子宇</li> <li>孙波</li> <li class="c2">石淦</li> <li> <span>白雪冰</span> </li> <li>方伯仁</li> </ul> parent()直系祖辈们 var c = $('.c1'); c.parent(); c.parents(); // 直系的祖先辈 c.parentsUntil('body'); // 往上找,直到找到body标签为止,不包罗body标签 children()亲儿子们 var u = $('ul'); u.children(); // 找到所有儿子标签 u.children('.c1'); // 找到切合.c1选择器的儿子标签 next() 下一个 var c = $('.c1'); c.next(); nextAll(); // 下面所有兄弟 c.nextUntil('.c2'); // 下面到某个兄弟为止,不包罗阿谁兄弟 prev()上一个 var c = $('.c1'); c.prev(); c.prevAll();// 上面的所有兄弟,注意挨次是反的，从本身上一个到第一个 c.prevUntil('.c1'); // 到上面某个兄弟为止,不包罗阿谁兄弟,注意挨次都是反的 siblings()同辈们 c.siblings(); // 找到不包罗本身的所有兄弟 c.siblings('.c1'); // 筛选兄弟中有class类值为c1的标签 find() 找儿女 $('li').find('span'); // 等同于css的li span选择器 first()和last()和eq(索引值) $('li').first(); // 找所有li标签中的第一个 $('li').last(); // 找所有li标签中的最后一个 $('li').eq(0); // 凭据索引取对应的阿谁标签,索引从0开始 $('li').eq(-1); // 最后一个 text() 和 html()

素质：替换操纵