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]
- :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
相关推荐
83510998 2020-08-08
tthappyer 2020-07-25
tztzyzyz 2020-07-05
87281248 2020-07-04
82244951 2020-06-28
89510194 2020-06-27
牵手白首 2020-06-14
开心就好 2020-06-10
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15