脚本宝典收集整理的这篇文章主要介绍了jQuery Note,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
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
- :hidden
- :visible
- [attribute]
- [attribute = val]
- [attribute != val]
For Form Elements:
- :enabled
- :disabled
- :checked
- :selected
2.4 表单选择器
3. Query
Query(无参数时) or Modify(有参数时) Methods
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) {
...;
});
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
以上是脚本宝典为你收集整理的jQuery Note全部内容,希望文章能够帮你解决jQuery Note所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。