脚本宝典收集整理的这篇文章主要介绍了

jQuery Note

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

jQuery: JavaScript library

1. jQueryDOM 的转换

        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

总结

以上是脚本宝典为你收集整理的

jQuery Note

全部内容,希望文章能够帮你解决

jQuery Note

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过