炎热的一天还有麦当当来安慰

jq复习

选择器：

  • var div = $(‘#abc’); 根据id名选择
  • var ps = $(‘p’); 根据标签名选择
  • var a = $(‘.red’); 根据类名选择
  • var email = $(‘[name=email]’); 选择属性
  • var icons = $(‘[name^=icon]’); 找出所有name属性值以icon开头的DOM
  • 找出所有name属性值以with结尾的DOM
  • 以上选择器可以组合选择，如var emailInput = $(‘input[name=email]’);
  • 多项选择器：$(‘p.red,p.green’); 把 class名为red和green的都选出来.

层级选择器

如$(‘ul.lang li’); 选出clas是名为lang的ul中的子标签li

过滤器

$(‘ul.lang li’); 若选出了JavaScript、Python和Lua 3个节点，那么

  • $(‘ul.lang li:first-child’); // 仅选出JavaScript
  • $(‘ul.lang li:lasst-child’); // 仅选出Lua
  • $(‘ul.lang li:nth-child(2)’); // 选出第N个元素，N从1开始
  • $(‘ul.lang li:nth-child(even)’); // 选出序号为偶数的元素
  • $(‘ul.lang li:nth-child(odd)’); // 选出序号为奇数的元素

表单相关

-:input：可以选择<input>，<textarea>，<select>和<button>；

  • :file：可以选择<input type="file">，和input[type=file]一样；

  • :checkbox：可以选择复选框，和input[type=checkbox]一样；

  • :radio：可以选择单选框，和input[type=radio]一样；

  • :focus：可以选择当前输入焦点的元素，例如把光标放到一个<input>上，用$('input:focus')就可以选出；

  • :checked：选择当前勾上的单选框和复选框，用这个选择器可以立刻获得用户选择的项目，如$('input[type=radio]:checked')；

  • :enabled：可以选择可以正常输入的<input>、<select>
    等，也就是没有灰掉的输入；

  • :disabled：和:enabled正好相反，选择那些不能输入的。

查找和过滤

查找

  • find():对子级元素查找；
  • parent()；对上一级元素进行查找；
  • next()：查找同级的下一个元素。
  • pre()：查找同级的前一个元素。
  • 这四种方法（）内填的参数为过滤的信息，若无法查找到匹配的元素，则会返回空的jquery对象。

过滤

  • filter()：filter可以过滤掉不想要的元素，注意填写的参数为不需要的元素名。
  • map()方法把一个jQuery对象包含的若干DOM节点转化为其他对象：
1
2
3
4
var langs = $('ul.lang li'); 
var arr = langs.map(function () {
    return this.innerHTML;
}).get(); // 用get()拿到包含string的Array
  • first(), last() ,slice() （不做过多介绍）

DOM

  • text()；获取某节点的文本内容；
  • html()：获取某节点的html文本内容。
  • css()：对节点css进行操作，如$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');
  • addcss()：为节点加入css

  • attr()：可以改变节点的属性
  • removeattr()：可以删除节点的属性。
  • prop()：用于判断节点的属性值中是否有指定值，返回boolen值类型
  • 对于表单元素，jQuery对象统一提供val()方法获取和设置对应的value属性

  • 添加元素的方法：
    • 添加子节点：append()加到多有子节点的最后面，preappend()加到所有子节点的前面
    • 添加同级的节点：after()和before()
  • 删除节点的方法：remove();