jQuery Note

jQuery: JavaScript library

1. jQuery 和 DOM 的转换

  • DOM ---> jQuery

    $(DOM obj)
var obj = document.getElementById('d1');
        var $obj = $(obj);
        $obj.html('hello');
  • jQuery ---> DOM

    $obj.get(0) or $obj.get()[0]
var $obj = $('#d1');
        var obj = $(obj).get(0);
        obj.innerHTML = 'hello';

2. Selector

similar to CSS selector

2.1 基本选择器

  • #id
  • .class
  • element
  • selector1, selector2, ...
  • * : all elements

2.2 层次选择器

  • selector1 selector2 ... : find 2 in 1
  • selector1 > selector2 : 只找直接字节点
  • selector1 + selector2 : selector1的下一个selector2兄弟节点
  • selector1 ~ selector2 : selector1的所有selector2兄弟

2.3 过滤选择器

start by : or []
  • :first
  • :last
  • :not(selector)
  • :even
  • :odd
  • :eq(index)
  • :gt(index)
  • :lt(index)
  • :nth-child(index/odd/even) //index starts from 1
  • :constains(text) : 包含text文本的元素
  • :empty : 不包含子元素和文本的空元素
  • :has(selector)
  • :parent : 包含子元素或文本的元素
  • :hidden
  • :visible
  • [attribute]
  • [attribute = val]
  • [attribute != val]
For Form Elements:
  • :enabled
  • :disabled
  • :checked
  • :selected

2.4 表单选择器

  • :input
  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :button
  • :file

3. Query

Query(无参数时) or Modify(有参数时) Methods
  • html()
  • text()
  • val()
  • attr()

4. DOM 操作

4.1 Create DOM Element

$(html)

    var $obj = $('<div>hello</div>');

4.2 Insert

  • 子节点

    • append($obj)
    • prepend($obj)
  • 兄弟节点

    • after($obj)
    • before($obj)

4.3 delete

  • remove()
  • remove(selector)
  • empty()

4.4 Clone

  • clone()
  • clone(true) //复制节点也有同样行为,复制处理代码

4.5 Style

  • attr("attr", "val");
  • addClass(" ");
  • removeClass(""); // 无参数时表示移除所有样式
  • toggleClass(" "); // 切换样式
  • hasClass("");
  • css(""); //读取css值
  • css("", ""); //设置样式 可以连缀使用

4.6 Iterate

  • childen() / childen(selector)
  • next() / next(selector)
  • prev() / prev(selector)
  • siblings / siblings(selector)
  • find(selector)
  • parent()

5. Event

5.1 Event Bind

  • $obj.bind(event type, handler function);
  • $obj.eventType(func);

5.2 Get Event Object

$obj.click(function(e) {
            ...;
        });

e是jquery对象,是DHTML里面的封装

5.3 Event

  • Attributes:

    • var obj = e.target // return DOM object
    • e.pageX
    • e.pageY
  • 事件冒泡机制

    • e.stopPropagation()
  • 合成事件

    • hover
    • toggle() 在多事件响应中切换
  • 模拟操作:
$obj.trigger(EventType)
        e.g. 
            $obj.trigger("focus");
            简写: $obj.focus();

6. jQuery 动画

  • show(slow/fast/normal/ms, callback)
  • hide(slow/fast/normal/ms, callback)
  • slideDown()
  • slideUp()
  • fadeIn()
  • fadeOut()
  • 自定义:

    • animate({'left': '500px'}, ms, callback)
    • animate({'left': '500px'}, ms).callback();

7. 类数组

  • length
  • each(func)
  • eq(index)
  • get()
  • index(obj)

8. AJAX

  • load(请求地址,请求参数)

    有请求参数发POST
    无请求参数发GET
  • get(请求地址,请求参数,回调函数,服务器返回的数据类型(html/text/JSON/xml/script))
  • ajax({})

    {}内可以设置的参数

    • url
    • type
    • data
    • dataType
    • sucess
    • error
    • async: true

相关推荐