jquery学习总结

目录

选择器

操作html

获取和改变内容

获取和改变属性

添加元素

删除元素

获取和改变尺寸

遍历

遍历祖先

遍历后代

遍历同胞

选择单一元素

过滤

---

选择器

$("#id", ".class")  复合选择器
$(div p span)       层级选择器 //div下的p元素中的span元素
$(div>p)            父子选择器 //div下的所有p元素
$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)
$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)
$(.p:last)          类选择器 加 过滤选择器  第一个和最后一个（first 或者 last）
$("#mytable td:odd")      层级选择 加 过滤选择器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引选择器 div下的第三个p元素（索引是从0开始）
$("a[href='www.baidu.com']")  属性选择器
$("p:contains(test)")        // 内容过滤选择器，包含text内容的p元素
$(":emtyp")        //内容过滤选择器，所有空标签（不包含子标签和内容的标签）parent 相反
$(":hidden")       //所有隐藏元素 visible 
$("input:enabled") //选取所有启用的表单元素
$(":disabled")     //所有不可用的元素
$("input:checked") //获取所有选中的复选框单选按钮等
$("select option:selected") //获取选中的选项元素

$("*")	                  选取所有元素
$("a[target='_blank']")	  选取所有 target 属性值等于 "_blank" 的 <a> 元素
$(":button")	          选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	          选取偶数位置的 <tr> 元素
$("tr:odd")	              选取奇数位置的 <tr> 元素

操作html

获取和改变内容

text()，html()，val()

括号内可以加回调函数，第一个参数为索引，第二个为旧值，return的为新值

$("#test1").text(function(i,origText){
    return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
});

获取和改变属性

prop()，attr()

$("a").prop("href","http://www.baidu.com");

$("a").prop({
    "href" : "http://www.baidu.com",
    "title" : "Vansal"
});

同样拥有回调函数

  $("a").prop("href", function(i,origValue){
    return origValue + "/vansal"; 
  });

prop()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是 undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

添加元素

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

括号内可以为一个数组

function afterText(){
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after([txt1,txt2,txt3]);          // 在图片后添加文本
}

删除元素

• remove() - 删除被选元素（及其子元素）
• empty() - 删除被选元素的子元素

// 移除所有 class="italic" 的 p 元素
$("p").remove(".italic");

获取和改变尺寸

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

设置了 box-sizing 后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值。

.test{width:100px;height:100px;padding:10px;border:10px;box-sizing:border-box;}
 width() 获取为: 60
 innerWidth() 获取值为: 80
 outWidth() 获取值为: 100

遍历

遍历祖先

• parent()
• parents()
• parentsUntil()

// 不包含div元素
$("span").parentsUntil("div");

遍历后代

• children()
• find()

遍历同胞

• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()

选择单一元素

• first()
• last()
• eq(i)

过滤

$("p").filter(".url");

$("p").not(".url");