jquery属性的相关js实现方法
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery属性的相关js实现方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含18483字，纯文字阅读大概需要27分钟。
内容图文
有 些公司手机网站开发不用第三方的jquery或者zeptio，直接用原生的javascript。原生javascript功能是蛮强大的，只不过部分属性不支持IE8以下浏览器。下面对jquery相关方法，如何用js来实现，做一些简单总结。
元素操作
Add Class
//JQUERY
$
(
el
).
addClass
(
className
);
//js
//谷歌浏览器，火狐浏览器，IE8+
if
(
el
.
classList
)
el
.
classList
.
add
(
className
);
else
el
.
className
+=
‘ ‘
+
className
;
//谷歌浏览器，火狐浏览器，IE10+
el
.
classList
.
add
(
className
);
After
//JQUERY
$
(
el
).
after
(
htmlString
);
//js 谷歌浏览器，火狐浏览器，IE8+
el
.
insertAdjacentHTML
(
‘afterend‘
,
htmlString
);
Append
//JQUERY
$
(
parent
).
append
(
el
);
//js谷歌浏览器，火狐浏览器，IE8+
parent
.
appendChild
(
el
);
Before
//JQUERY
$
(
el
).
before
(
htmlString
);
//js谷歌浏览器，火狐浏览器，IE8+
el
.
insertAdjacentHTML
(
‘beforebegin‘
,
htmlString
);
Children
//JQUERY
$
(
el
).
children
();
//js
//谷歌浏览器，火狐浏览器，IE8+
var
children
=
[];
for
(
var
i
=
el
.
children
.
length
;
i
--;)
{
// Skip comment nodes on IE8
if
(
el
.
children
[
i
].
nodeType
!=
8
)
children
.
unshift
(
el
.
children
[
i
]);
}
//谷歌浏览器，火狐浏览器，IE9+
el
.
children
Clone
//JQUERY
$
(
el
).
clone
();
//谷歌浏览器，火狐浏览器，IE8+
el
.
cloneNode
(
true
);
Contains
//JQUERY
$
.
contains
(
el
,
child
);
//谷歌浏览器，火狐浏览器，IE8+
el
!==
child
&&
el
.
contains
(
child
);
Contains Selector
//JQUERY
$
(
el
).
find
(
selector
).
length
;
//谷歌浏览器，火狐浏览器，IE8+
el
.
querySelector
(
selector
)
!==
null
Each
//JQUERY
$
(
selector
).
each
(
function
(
i
,
el
){
});
//js谷歌浏览器，火狐浏览器，IE8+
function
forEachElement
(
selector
,
fn
)
{
var
elements
=
document
.
querySelectorAll
(
selector
);
for
(
var
i
=
0
;
i
<
elements
.
length
;
i
++)
fn
(
elements
[
i
],
i
);
}
forEachElement
(
selector
,
function
(
el
,
i
){
});
//js谷歌浏览器，火狐浏览器，IE9+
var
elements
=
document
.
querySelectorAll
(
selector
);
Array
.
prototype
.
forEach
.
call
(
elements
,
function
(
el
,
i
){
});
Empty
//JQUERY
$
(
el
).
empty
();
//js谷歌浏览器，火狐浏览器，IE8+
while
(
el
.
firstChild
)
el
.
removeChild
(
el
.
firstChild
);
//js谷歌浏览器，火狐浏览器，IE9+
el
.
innerHTML
=
‘‘
;
过滤filter
//JQUERY
$
(
selector
).
filter
(
filterFn
);
//谷歌浏览器，火狐浏览器，IE8+
function
filter
(
selector
,
filterFn
)
{
var
elements
=
document
.
querySelectorAll
(
selector
);
var
out
=
[];
for
(
var
i
=
elements
.
length
;
i
--;)
{
if
(
filterFn
(
elements
[
i
]))
out
.
unshift
(
elements
[
i
]);
}
return
out
;
}
filter
(
selector
,
filterFn
);
//谷歌浏览器，火狐浏览器，IE9+
Array
.
prototype
.
filter
.
call
(
document
.
querySelectorAll
(
selector
),
filterFn
);
查找子元素
//JQUERY
$
(
el
).
find
(
selector
);
//谷歌浏览器，火狐浏览器，IE8+
el
.
querySelectorAll
(
selector
);
查找、选择器
//JQUERY
$
(
‘.my #awesome selector‘
);
//谷歌浏览器，火狐浏览器，IE8+
document
.
querySelectorAll
(
‘.my #awesome selector‘
);
获取属性值attr
//JQUERY
$
(
el
).
attr
(
‘tabindex‘
);
//谷歌浏览器，火狐浏览器，IE8+
el
.
getAttribute
(
‘tabindex‘
);
获取Html内容
//JQUERY
$
(
el
).
html
();
//js
el
.
innerHTML
获取CSS样式
//JQUERY
$
(
el
).
css
(
ruleName
);
//谷歌浏览器，火狐浏览器，IE9+
getComputedStyle
(
el
)[
ruleName
];
获取文本内容
//JQUERY
$
(
el
).
text
();
//谷歌浏览器，火狐浏览器，IE8+
el
.
textContent
||
el
.
innerText
//谷歌浏览器，火狐浏览器，IE9+
el
.
textContent
Has Class
//JQUERY
$
(
el
).
hasClass
(
className
);
//谷歌浏览器，火狐浏览器，IE8+
if
(
el
.
classList
)
el
.
classList
.
contains
(
className
);
else
new
RegExp
(
‘(^| )‘
+
className
+
‘( |$)‘
,
‘gi‘
).
test
(
el
.
className
);
//谷歌浏览器，火狐浏览器，IE10+
el
.
classList
.
contains
(
className
);
元素比较
JQUERY
$
(
el
).
is
(
$
(
otherEl
));
//js
el
===
otherEl
比较类名
//JQUERY
$
(
el
).
is
(
‘.my-class‘
);
//谷歌浏览器，火狐浏览器，IE8+
var
matches
=
function
(
el
,
selector
)
{
var
_matches
=
(
el
.
matches
||
el
.
matchesSelector
||
el
.
msMatchesSelector
||
el
.
mozMatchesSelector
||
el
.
webkitMatchesSelector
||
el
.
oMatchesSelector
);
if
(
_matches
)
{
return
_matches
.
call
(
el
,
selector
);
}
else
{
var
nodes
=
el
.
parentNode
.
querySelectorAll
(
selector
);
for
(
var
i
=
nodes
.
length
;
i
--;)
{
if
(
nodes
[
i
]
===
el
)
return
true
;
}
return
false
;
}
};
matches
(
el
,
‘.my-class‘
);
//谷歌浏览器，火狐浏览器，IE9+
var
matches
=
function
(
el
,
selector
)
{
return
(
el
.
matches
||
el
.
matchesSelector
||
el
.
msMatchesSelector
||
el
.
mozMatchesSelector
||
el
.
webkitMatchesSelector
||
el
.
oMatchesSelector
).
call
(
el
,
selector
);
};
matches
(
el
,
‘.my-class‘
);
Next
//JQUERY
$
(
el
).
next
();
//谷歌浏览器，火狐浏览器，IE8+
// nextSibling can include text nodes
function
nextElementSibling
(
el
)
{
do
{
el
=
el
.
nextSibling
;
}
while
(
el
&&
el
.
nodeType
!==
1
);
return
el
;
}
el
.
nextElementSibling
||
nextElementSibling
(
el
);
//谷歌浏览器，火狐浏览器，IE9+
el
.
nextElementSibling
Offset
//JQUERY
$
(
el
).
offset
();
//js谷歌浏览器，火狐浏览器，IE8+
var
rect
=
el
.
getBoundingClientRect
()
{
top
:
rect
.
top
+
document
.
body
.
scrollTop
,
left
:
rect
.
left
+
document
.
body
.
scrollLeft
}
Outer Width
//JQUERY
$
(
el
).
outerWidth
();
//js
el
.
offsetWidth
Parent
//JQUERY
$
(
el
).
parent
();
//js
el
.
parentNode
Position
//JQUERY
$
(
el
).
position
();
//js
{
left
:
el
.
offsetLeft
,
top
:
el
.
offsetTop
}
Prev
//JQUERY
$
(
el
).
prev
();
//谷歌浏览器，火狐浏览器，IE8+
// prevSibling can include text nodes
function
previousElementSibling
(
el
)
{
do
{
el
=
el
.
previousSibling
;
}
while
(
el
&&
el
.
nodeType
!==
1
);
return
el
;
}
el
.
previousElementSibling
||
previousElementSibling
(
el
);
//谷歌浏览器，火狐浏览器，IE9+
el
.
previousElementSibling
Remove
//JQUERY
$
(
el
).
remove
();
//js谷歌浏览器，火狐浏览器，IE8+
el
.
parentNode
.
removeChild
(
el
);
Remove Class
//JQUERY
$
(
el
).
removeClass
(
className
);
//js谷歌浏览器，火狐浏览器，IE8+
if
(
el
.
classList
)
el
.
classList
.
remove
(
className
);
else
el
.
className
=
el
.
className
.
replace
(
new
RegExp
(
‘(^|\\b)‘
+
className
.
split
(
‘ ‘
).
join
(
‘|‘
)
+
‘(\\b|$)‘
,
‘gi‘
),
‘ ‘
);
//谷歌浏览器，火狐浏览器，IE10+
el
.
classList
.
remove
(
className
);
Replace From Html
//JQUERY
$
(
el
).
replaceWith
(
string
);
//谷歌浏览器，火狐浏览器，IE8+
el
.
outerHTML
=
string
;
Set Attributes
//JQUERY
$
(
el
).
attr
(
‘tabindex‘
,
3
);
//谷歌浏览器，火狐浏览器，IE8+
el
.
setAttribute
(
‘tabindex‘
,
3
);
Set Html
//JQUERY
$
(
el
).
html
(
string
);
//谷歌浏览器，火狐浏览器，IE8+
el
.
innerHTML
=
string
;
Set Style
//JQUERY
$
(
el
).
css
(
‘border-width‘
,
‘20px‘
);
//谷歌浏览器，火狐浏览器，IE8+
// Use a class if possible
el
.
style
.
borderWidth
=
‘20px‘
;
Set Text
//JQUERY
$
(
el
).
text
(
string
);
//谷歌浏览器，火狐浏览器，IE8+
if
(
el
.
textContent
!==
undefined
)
el
.
textContent
=
string
;
else
el
.
innerText
=
string
;
//谷歌浏览器，火狐浏览器，IE9+
el
.
textContent
=
string
;
Siblings
//JQUERY
$
(
el
).
siblings
();
//谷歌浏览器，火狐浏览器，IE8+
var
siblings
=
Array
.
prototype
.
slice
.
call
(
el
.
parentNode
.
children
);
for
(
var
i
=
siblings
.
length
;
i
--;)
{
if
(
siblings
[
i
]
===
el
)
{
siblings
.
splice
(
i
,
1
);
break
;
}
}
//谷歌浏览器，火狐浏览器，IE9+
Array
.
prototype
.
filter
.
call
(
el
.
parentNode
.
children
,
function
(
child
){
return
child
!==
el
;
});
Toggle Class
//JQUERY
$
(
el
).
toggleClass
(
className
);
//谷歌浏览器，火狐浏览器，IE8+
if
(
el
.
classList
)
{
el
.
classList
.
toggle
(
className
);
}
else
{
var
classes
=
el
.
className
.
split
(
‘ ‘
);
var
existingIndex
=
-
1
;
for
(
var
i
=
classes
.
length
;
i
--;)
{
if
(
classes
[
i
]
===
className
)
existingIndex
=
i
;
}
if
(
existingIndex
>=
0
)
classes
.
splice
(
existingIndex
,
1
);
else
classes
.
push
(
className
);
el
.
className
=
classes
.
join
(
‘ ‘
);
}
//谷歌浏览器，火狐浏览器，IE9+
if
(
el
.
classList
)
{
el
.
classList
.
toggle
(
className
);
}
else
{
var
classes
=
el
.
className
.
split
(
‘ ‘
);
var
existingIndex
=
classes
.
indexOf
(
className
);
if
(
existingIndex
>=
0
)
classes
.
splice
(
existingIndex
,
1
);
else
classes
.
push
(
className
);
el
.
className
=
classes
.
join
(
‘ ‘
);
}
//谷歌浏览器，火狐浏览器，IE10+
el
.
classList
.
toggle
(
className
);
事件
Off
//JQUERY
$
(
el
).
off
(
eventName
,
eventHandler
);
//谷歌浏览器，火狐浏览器，IE8+
function
removeEventListener
(
el
,
eventName
,
handler
)
{
if
(
el
.
removeEventListener
)
el
.
removeEventListener
(
eventName
,
handler
);
else
el
.
detachEvent
(
‘on‘
+
eventName
,
handler
);
}
removeEventListener
(
el
,
eventName
,
handler
);
//谷歌浏览器，火狐浏览器，IE9+
el
.
removeEventListener
(
eventName
,
eventHandler
);
On
//JQUERY
$
(
el
).
on
(
eventName
,
eventHandler
);
//谷歌浏览器，火狐浏览器，IE8+
function
addEventListener
(
el
,
eventName
,
handler
)
{
if
(
el
.
addEventListener
)
{
el
.
addEventListener
(
eventName
,
handler
);
}
else
{
el
.
attachEvent
(
‘on‘
+
eventName
,
function
(){
handler
.
call
(
el
);
});
}
}
addEventListener
(
el
,
eventName
,
handler
);
谷歌浏览器，火狐浏览器，
IE9
+
el
.
addEventListener
(
eventName
,
eventHandler
);
Ready
//JQUERY
$
(
document
).
ready
(
function
(){
});
//谷歌浏览器，火狐浏览器，IE8+
function
ready
(
fn
)
{
if
(
document
.
readyState
!=
‘loading‘
){
fn
();
}
else
if
(
document
.
addEventListener
)
{
document
.
addEventListener
(
‘DOMContentLoaded‘
,
fn
);
}
else
{
document
.
attachEvent
(
‘onreadystatechange‘
,
function
()
{
if
(
document
.
readyState
!=
‘loading‘
)
fn
();
});
}
}
//谷歌浏览器，火狐浏览器，IE9+
function
ready
(
fn
)
{
if
(
document
.
readyState
!=
‘loading‘
){
fn
();
}
else
{
document
.
addEventListener
(
‘DOMContentLoaded‘
,
fn
);
}
指定事件触发
//JQUERY
$
(
el
).
trigger
(
‘my-event‘
,
{
some
:
‘data‘
});
//js谷歌浏览器，火狐浏览器，IE9+
if
(
window
.
CustomEvent
)
{
var
event
=
new
CustomEvent
(
‘my-event‘
,
{
detail
:
{
some
:
‘data‘
}});
}
else
{
var
event
=
document
.
createEvent
(
‘CustomEvent‘
);
event
.
initCustomEvent
(
‘my-event‘
,
true
,
true
,
{
some
:
‘data‘
});
}
el
.
dispatchEvent
(
event
);
Trigger Native
//JQUERY
$
(
el
).
trigger
(
‘change‘
);
//谷歌浏览器，火狐浏览器，IE8+
if
(
document
.
createEvent
)
{
var
event
=
document
.
createEvent
(
‘HTMLEvents‘
);
event
.
initEvent
(
‘change‘
,
true
,
false
);
el
.
dispatchEvent
(
event
);
}
else
{
el
.
fireEvent
(
‘onchange‘
);
}
//谷歌浏览器，火狐浏览器，IE9+
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
var
event
=
document
.
createEvent
(
‘HTMLEvents‘
);
event
.
initEvent
(
‘change‘
,
true
,
false
);
el
.
dispatchEvent
(
event
);
技巧
Array Each
//JQUERY
$
.
each
(
array
,
function
(
i
,
item
){
});
谷歌浏览器，火狐浏览器，
IE8
+
function
forEach
(
array
,
fn
)
{
for
(
i
=
0
;
i
<
array
.
length
;
i
++)
fn
(
array
[
i
],
i
);
}
forEach
(
array
,
function
(
item
,
i
){
});
//谷歌浏览器，火狐浏览器，IE9+
array
.
forEach
(
function
(
item
,
i
){
});
深度扩展
//JQUERY
$
.
extend
(
true
,
{},
objA
,
objB
);
//谷歌浏览器，火狐浏览器，IE8+
var
deepExtend
=
function
(
out
)
{
out
=
out
||
{};
for
(
var
i
=
1
;
i
<
arguments
.
length
;
i
++)
{
var
obj
=
arguments
[
i
];
if
(!
obj
)
continue
;
for
(
var
key
in
obj
)
{
if
(
obj
.
hasOwnProperty
(
key
))
{
if
(
typeof
obj
[
key
]
===
‘object‘
)
deepExtend
(
out
[
key
],
obj
[
key
]);
else
out
[
key
]
=
obj
[
key
];
}
}
}
return
out
;
};
deepExtend
({},
objA
,
objB
);
proxy
//JQUERY
$
.
proxy
(
fn
,
context
);
//谷歌浏览器，火狐浏览器，IE8+
fn
.
apply
(
context
,
arguments
);
//谷歌浏览器，火狐浏览器，IE9+
fn
.
bind
(
context
);
bind
//jQuery
$
.
extend
({},
objA
,
objB
);
//谷歌浏览器，火狐浏览器，IE8+
var
extend
=
function
(
out
)
{
out
=
out
||
{};
for
(
var
i
=
1
;
i
<
arguments
.
length
;
i
++)
{
if
(!
arguments
[
i
])
continue
;
for
(
var
key
in
arguments
[
i
])
{
if
(
arguments
[
i
].
hasOwnProperty
(
key
))
out
[
key
]
=
arguments
[
i
][
key
];
}
}
return
out
;
};
extend
({},
objA
,
objB
);
Index Of
//JQUERY
$
.
inArray
(
item
,
array
);
//谷歌浏览器，火狐浏览器，IE8+
function
indexOf
(
array
,
item
)
{
for
(
var
i
=
0
;
i
<
array
.
length
;
i
++)
{
if
(
array
[
i
]
===
item
)
return
i
;
}
return
-
1
;
}
indexOf
(
array
,
item
);
谷歌浏览器，火狐浏览器，
IE9
+
array
.
indexOf
(
item
);
Is Array
//JQUERY
$
.
isArray
(
arr
);
//谷歌浏览器，火狐浏览器，IE8+
isArray
=
Array
.
isArray
||
function
(
arr
)
{
return
Object
.
prototype
.
toString
.
call
(
arr
)
==
‘[object Array]‘
;
}
isArray
(
arr
);
//谷歌浏览器，火狐浏览器，IE9+
Array
.
isArray
(
arr
);
Map
//JQUERY
$
.
map
(
array
,
function
(
value
,
index
){
});
//js谷歌浏览器，火狐浏览器，IE8+
function
map
(
arr
,
fn
)
{
var
results
=
[];
for
(
var
i
=
0
;
i
<
arr
.
length
;
i
++)
results
.
push
(
fn
(
arr
[
i
],
i
));
return
results
;
}
map
(
array
,
function
(
value
,
index
){
});
//谷歌浏览器，火狐浏览器，IE9+
array
.
map
(
function
(
value
,
index
){
});
Now
//JQUERY
$
.
now
();
//谷歌浏览器，火狐浏览器，IE8+
new
Date
().
getTime
();
//谷歌浏览器，火狐浏览器，IE9+
Date
.
now
();
Parse Html
//JQUERY
$
.
parseHTML
(
htmlString
);
谷歌浏览器，火狐浏览器，
IE8
+
var
parseHTML
=
function
(
str
)
{
var
el
=
document
.
createElement
(
‘div‘
);
el
.
innerHTML
=
str
;
return
el
.
children
;
};
parseHTML
(
htmlString
);
谷歌浏览器，火狐浏览器，
IE9
+
var
parseHTML
=
function
(
str
)
{
var
tmp
=
document
.
implementation
.
createHTMLDocument
();
tmp
.
body
.
innerHTML
=
str
;
return
tmp
.
body
.
children
;
};
parseHTML
(
htmlString
);
解析 Json
//JQUERY
$
.
parseJSON
(
string
);
//谷歌浏览器，火狐浏览器，IE8+
JSON
.
parse
(
string
);
Trim
//JQUERY
$
.
trim
(
string
);
//谷歌浏览器，火狐浏览器，IE8+
string
.
replace
(
/^\s+|\s+$/
g
,
‘‘
);
//谷歌浏览器，火狐浏览器，IE9+
string
.
trim
();
Type
//JQUERY
$
.
type
(
obj
);
谷歌浏览器，火狐浏览器，
IE8
+
Object
.
prototype
.
toString
.
call
(
obj
)
.
replace
(
/^\[object (.+)\]$/
,
"$1"
)
.
toLowerCase
();
ajax
新AJAX方法fetch()
基本Fetch用法
让我们先用一个例子来比较一下使用 XMLHttpRequest 和使用 fetch 之间的不同。我们要请求一个URL，获取JSON格式的返回结果。
原来的XMLHttpRequest
一个 XMLHttpRequest 请求需要两个监听器来捕捉 success 和 error 两种情形，而且需要调用 open() 和 send() 方法。
function
reqListener
()
{
var
data
=
JSON
.
parse
(
this
.
responseText
);
console
.
log
(
data
);
}
function
reqError
(
err
)
{
console
.
log
(
‘Fetch Error :-S‘
,
err
);
}
var
oReq
=
new
XMLHttpRequest
();
oReq
.
onload
=
reqListener
;
oReq
.
onerror
=
reqError
;
oReq
.
open
(
‘get‘
,
‘./api/some.json‘
,
true
);
oReq
.
send
();
Fetch方法：
我们的 fetch 请求的代码基本上是这样的：
fetch
(
‘./api/some.json‘
)
.
then
(
function
(
response
)
{
if
(
response
.
status
!==
200
)
{
console
.
log
(
‘Looks like there was a problem. Status Code: ‘
+
response
.
status
);
return
;
}
// Examine the text in the response
response
.
json
().
then
(
function
(
data
)
{
console
.
log
(
data
);
});
}
)
.
catch
(
function
(
err
)
{
console
.
log
(
‘Fetch Error :-S‘
,
err
);
});
用fetch执行表单数据提交
在WEB应用中，提交表单是非常常见的操作，用fetch来提交表单数据也是非常简洁。
fetch里提供了 method 和 body 参数选项。
fetch
(
url
,
{
method
:
‘post‘
,
headers
:
{
"Content-type"
:
"application/x-www-form-urlencoded; charset=UTF-8"
},
body
:
‘foo=bar&lorem=ipsum‘
})
.
then
(
json
)
.
then
(
function
(
data
)
{
console
.
log
(
‘Request succeeded with JSON response‘
,
data
);
})
.
catch
(
function
(
error
)
{
console
.
log
(
‘Request failed‘
,
error
);
});
在Fetch请求里发送用户身份凭证信息
如果你想在fetch请求里附带cookies之类的凭证信息，可以将 credentials 参数设置成 “include” 值。
fetch
(
url
,
{
credentials
:
‘include‘
})
JSON
//JQUERY
$
.
getJSON
(
‘/my/url‘
,
function
(
data
)
{
});
//谷歌浏览器，火狐浏览器，IE8+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onreadystatechange
=
function
()
{
if
(
this
.
readyState
===
4
)
{
if
(
this
.
status
>=
200
&&
this
.
status
<
400
)
{
// Success!
var
data
=
JSON
.
parse
(
this
.
responseText
);
}
else
{
// Error :(
}
}
};
request
.
send
();
request
=
null
;
//谷歌浏览器，火狐浏览器，IE9+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onload
=
function
()
{
if
(
request
.
status
>=
200
&&
request
.
status
<
400
)
{
// Success!
var
data
=
JSON
.
parse
(
request
.
responseText
);
}
else
{
// We reached our target server, but it returned an error
}
};
request
.
onerror
=
function
()
{
// There was a connection error of some sort
};
request
.
send
();
//谷歌浏览器，火狐浏览器，IE10+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onload
=
function
()
{
if
(
this
.
status
>=
200
&&
this
.
status
<
400
)
{
// Success!
var
data
=
JSON
.
parse
(
this
.
response
);
}
else
{
// We reached our target server, but it returned an error
}
};
request
.
onerror
=
function
()
{
// There was a connection error of some sort
};
request
.
send
();
Post
//JQUERY
$
.
ajax
({
type
:
‘POST‘
,
url
:
‘/my/url‘
,
data
:
data
});
//谷歌浏览器，火狐浏览器，IE8+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘POST‘
,
‘/my/url‘
,
true
);
request
.
setRequestHeader
(
‘Content-Type‘
,
‘application/x-www-form-urlencoded; charset=UTF-8‘
);
request
.
send
(
data
);
Request
//JQUERY
$
.
ajax
({
type
:
‘GET‘
,
url
:
‘/my/url‘
,
success
:
function
(
resp
)
{
},
error
:
function
()
{
}
});
//谷歌浏览器，火狐浏览器，IE8+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onreadystatechange
=
function
()
{
if
(
this
.
readyState
===
4
)
{
if
(
this
.
status
>=
200
&&
this
.
status
<
400
)
{
// Success!
var
resp
=
this
.
responseText
;
}
else
{
// Error :(
}
}
};
request
.
send
();
request
=
null
;
//谷歌浏览器，火狐浏览器，IE9+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onload
=
function
()
{
if
(
request
.
status
>=
200
&&
request
.
status
<
400
)
{
// Success!
var
resp
=
request
.
responseText
;
}
else
{
// We reached our target server, but it returned an error
}
};
request
.
onerror
=
function
()
{
// There was a connection error of some sort
};
request
.
send
();
//谷歌浏览器，火狐浏览器，IE10+
var
request
=
new
XMLHttpRequest
();
request
.
open
(
‘GET‘
,
‘/my/url‘
,
true
);
request
.
onload
=
function
()
{
if
(
this
.
status
>=
200
&&
this
.
status
<
400
)
{
// Success!
var
resp
=
this
.
response
;
}
else
{
// We reached our target server, but it returned an error
}
};
request
.
onerror
=
function
()
{
// There was a connection error of some sort
};
request
.
send
();
特效
淡入淡出
//JQUERY
$
(
el
).
fadeIn
();
//谷歌浏览器，火狐浏览器，IE8+
function
fadeIn
(
el
)
{
var
opacity
=
0
;
el
.
style
.
opacity
=
0
;
el
.
style
.
filter
=
‘‘
;
var
last
=
+
new
Date
();
var
tick
=
function
()
{
opacity
+=
(
new
Date
()
-
last
)
/
400
;
el
.
style
.
opacity
=
opacity
;
el
.
style
.
filter
=
‘alpha(opacity=‘
+
(
100
*
opacity
)|
0
+
‘)‘
;
last
=
+
new
Date
();
if
(
opacity
<
1
)
{
(
window
.
requestAnimationFrame
&&
requestAnimationFrame
(
tick
))
||
setTimeout
(
tick
,
16
);
}
};
tick
();
}
fadeIn
(
el
);
//谷歌浏览器，火狐浏览器，IE9+
function
fadeIn
(
el
)
{
el
.
style
.
opacity
=
0
;
var
last
=
+
new
Date
();
var
tick
=
function
()
{
el
.
style
.
opacity
=
+
el
.
style
.
opacity
+
(
new
Date
()
-
last
)
/
400
;
last
=
+
new
Date
();
if
(+
el
.
style
.
opacity
<
1
)
{
(
window
.
requestAnimationFrame
&&
requestAnimationFrame
(
tick
))
||
setTimeout
(
tick
,
16
)
}
};
tick
();
}
fadeIn
(
el
);
//谷歌浏览器，火狐浏览器，IE10+
el
.
classList
.
add
(
‘show‘
);
el
.
classList
.
remove
(
‘hide‘
);
.
show
{
transition
:
opacity
400ms
;
}
.
hide
{
opacity
:
0
;
}
Hide
//JQUERY
$
(
el
).
hide
();
//谷歌浏览器，火狐浏览器，IE8+
el
.
style
.
display
=
‘none‘
;
Show
//JQUERY
$
(
el
).
show
();
//谷歌浏览器，火狐浏览器，IE8+
el
.
style
.
display
=
‘‘
;
原文：http://www.cnblogs.com/lidongfeng/p/5179733.html
内容总结
以上是互联网集市为您收集整理的jquery属性的相关js实现方法全部内容，希望文章能够帮你解决jquery属性的相关js实现方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】