js补充、jquery

标签：sub   开始   jquery代码   a标签   class   ++   this   ***   转换   今日内容 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 的是什么数据 有一种特效：点击输入框前的文字，可以跳转至框内。 // 两种形式： // 嵌套： 用户名: // for-id捆绑，非嵌套 密码: button补充 注册 这个形式的button按钮放在form标签里可以当做input-submit使用 可以跟后端做交互 且，这种内嵌形式的标签可以放图片！ // 普通按钮,没有提交效果 注册 // 下面这两个能够提交form表单数据 注册 jQuery jquery引入 // 外部网址引入 // 本地文件引入 //jquery.js本地文件路径 jQuery初识 // jquery对象 var d1 = $('#d1'); --> jQuery.fn.init?[div#d1] // 原生dom对象 var d = document.getElementById('d1'); --> // 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代码 这是c2 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代码： Name: Newsletter: // jquery代码: $("form input") // 结果 $("form input").change(function () { var a = $(this).val(); console.log(a); }); // 当改变前两个框时，都会打印框中输入的值；但最后一个框不会，因为它虽然也是input但它不在form内，不会被选择到。 属性选择器 // html代码: 这是啥! // 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代码: jquery代码:找到所有的type=text的input标签 $(':text'); 筛选器方法 html代码 谢一峰 王子宇 孙波 石淦 白雪冰 方伯仁 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() 本质：替换操作 同js的innerText和innerHTML 取文本: c.text(); 不带标签 c.html(); 带标签 设置文本: c.text('文本'); c.html('文本'); -- 文本--"皇家赌场" 标签属性操作 // 获取属性值 console.log($("ul li:eq(1)").attr("title")); // 设置属性 $("ul li:eq(1)").attr("title","不吃橘子"); // 值还可以设置为函数 $("ul li:eq(1)").attr("title",function(){ return this.value}); // 设置多个值 $("ul li:eq(1)").attr({title:"不喝橘子汁",value:"不是123"}); // 删除属性 $("ul li:eq(1)").removeAttr ("title"); 就这么简单， attr 其实就是原生js中 getAttribute 的简化实现, 而removeAttr 就是 removeAttribute 的简写了。 使用 attr 对 checked 属性进行设置时，会出错，故 checked 属性就用 prop 设置就行 css值操作 某些html标签可以通过id来获取并添加css效果，（格式就像json对象）如下。 调用对象是jquery对象 let text_list = $('.tips'); text_list.eq(1).css({'color': 'red'}); 比如一个id=a4的a标签 $(this.getElementByXid("a4")).css({ 'border-color':'#FFFFFF #FFFFFF #2FA4E7 #FFFFFF', 'border-bottom-style':'solid', 'border-width':'0px 0px 2px 0px', 'color':'#2FA4E7', }); class类值操作 html代码 css代码: .c1{ background-color: red; height: 100px; width: 100px; } .c2{ background-color: green; } jquery $('div').addClass('c2'); $('div').removeClass('c2'); $('div').toggleClass('c2'); 示例: var t = setInterval("$('div').toggleClass('c2');",500); val值操作 *** 示例： 示例: html代码: 男 女 抽烟 喝酒 烫头 北京 上海 深圳 波多 苍井 小泽 获取值 获取值： 文本输人框：$('#username').val(); 单选radio框：$('.a1:checked').val(); 多选checkout框：$('.a2:checked').val()是不行的;需要循环取值，如下： var d = $(':checkbox:checked'); for (var i=0;i