初始JQuery02

JQuery
本文总阅读量:
  1. 1. selector
    1. 1.1. 相对定位
    2. 1.2. 属性过滤选择器
    3. 1.3. 表单对象属性选择器（过滤器）
  2. 2. jQuery的Dom操作
    1. 2.1. 动态创建Dom节点
    2. 2.2. 删除节点
    3. 2.3. 节点操作

selector

相对定位

不仅可以使用选择器进行进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素.

1
2
3
4
//$(this) 代表tr，在tr下面找td
$("tr").click(function() {
       $("td:even", $(this)).css("backgroundColor", "red");
   });

属性过滤选择器

  • $("div[id]")选取有id属性的<div>
  • $("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")
  • $("div[title!=test]")选取title属性不为“test”的<div>
  • 还可以选择开头[name^=值]、结束[] name$=值]、包含[ name*=值]等，条件还可以复合。【[属性1=a][属性2=b]…】

表单对象属性选择器（过滤器）

  • $("#form1:enabled")选取id为form1的表单内所有启用的元素
  • $("#form1:disabled")选取id为form1的表单内所有禁用的元素
  • $(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.
  • $("select:selected")选取所有选中的选项元素（下拉列表）
  • 注意：$('':input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input>
  • $(":text")选取所有单行文本框，等价于$("input[type=text]"),$(‘input[type=text]’),$(‘:text’);
  • 同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。

jQuery的Dom操作

  1. 使用html()方法读取或者设置元素的innerHTML

  2. 使用text()方法读取或者设置元素的innerText：

  3. 使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。

    1
    2
    3
    4
    //获取
    alert($("a:first").attr("href"));
    //设置
    $("a:first").attr("href", "http://www.luox78.com");

  4. 使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)

动态创建Dom节点

先创建jquery dom对象var obj=$("<div style="background-color:blue;" />");

再动态添加$("body").append(obj);或者obj.appendTo($("body"))

append方法用来在元素的末尾追加元素（最后一个子节点）。增加元素末尾(儿子)

prepend，在元素的开始添加元素（第一个子节点）。增加元素开始(儿子)

after，在元素之后添加元素（添加兄弟）增加元素后面(兄弟)

before：在元素之前添加元素（添加兄弟）增加元素前面(兄弟)

子元素.appendTo(父元素);//主动巴结!到最后一个

子元素.prependTo(父元素);//主动巴结到第一个。

(*)A.insertBefore(B);将A加到到B的前面，等同于B.before(A);

(*)X.insertAfter(Y);将X加到到Y的后面，等同于Y.after(X);

删除节点

empty();清空某元素下的所有子节点

remove(selector)
删除当前元素，返回值为被删除的元素。还可以继续使用被删除的节点。比如重新添加到其他节点下：

1
2
var lis = $("#ulSite li").remove();
$("#ulSite2").append(lis);

clone()克隆节点，只复制节点，没事件

节点操作

  • 替换节点：

$("br").replaceWith("<hr/>");用<hr/>替换br$(‘<br/’).replaceAll(‘hr’); //调用者也得是选择器选择到

的元素。用<br/>元素替换所有的hr

  • 包裹节点

wrap()方法用来将所有元素逐个用指定标签包裹：[wrapAll()]$(“b”).wrap(“<font color=‘red’></font>”)将所粗体字红色显示
结果：<font color=‘red’><b></b></font>
wrapInner()//在内部围绕

jQueryfoundation jsfoundation
prev： next：