*jq和js
可以共存，不能混用；
方法函数化：
jquery中的this的写法是 $(this) ；html() 因为方法函数法的思想的存在，() 是不能省去的，运行函数；这在jquery中很常见；
js和jquery的关系：
可以互存，不能混用；
$()下的常用方法
has和filter的区别
has是包含的意思，选择的是元素里面的东西；
而filter针对的元素自身的选择；
next和prev：
next选择下一个兄弟节点；
prex选择上一个兄弟节点；
find 查找当前元素下所有的后代元素；
eq() 一组中的第几个；
index() 一组元素的索引；通过一组索引，来控制另外一个索
|
|
选项卡：
原生js和jquery：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
window.onload =
function
(){
var
oDiv = document.getElementById(
'div1'
);
var
aInput = oDiv.getElementsByTagName(
'input'
);
var
aCon = oDiv.getElementsByTagName(
'div'
);
for
(
var
i=0;i<aInput.length;i++){
aInput[i].index = i;
aInput[i].onclick =
function
(){
for
(
var
i=0;i<aInput.length;i++){
aInput[i].className =
''
;
aCon[i].style.display =
'none'
;
}
this
.className =
'active'
;
aCon[
this
.index].style.display =
'block'
;
};
}
};
|
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<div id=
"div1"
>
<input
class
=
"active"
type=
"button"
value=
"1"
/>
<input type=
"button"
value=
"2"
/>
<input type=
"button"
value=
"3"
/>
<div style=
"display:block"
>111111</div>
<div>222222</div>
<div>333333</div>
</div>
</body>
|
这里的jquery是根据js的思路来编写的；
也可以用其他的思路来做这个选项卡，用到siblings()等；
addClass和removeClass
|
1
2
3
4
|
$(
function
(){
$(
'div'
).addClass(
'box2 box4'
);
$(
'div'
).removeClass(
'box1'
);
});
|
width() innerWidth() outerWidth() 获取元素的宽和区别：
|
1
2
3
4
5
6
|
$(
function
(){
alert( $(
'div'
).width() );
//width
alert( $(
'div'
).innerWidth() );
//width + padding
alert( $(
'div'
).outerWidth() );
//width + padding + border
alert( $(
'div'
).outerWidth(
true
) );
//width + padding + border + margin
});
|
insertBefore() insertAfter()
注意：insertBefore是剪切的功能，不是复制的功能；
|
1
2
3
4
5
6
7
8
9
|
$(
function
(){
//$('span').insertBefore( $('div') ); //将span调整到div的前面，jq中的insertBefore和js中的insertBefore是一样的;具备剪切的功能，而不是复制的功能；
//$('div').insertAfter( $('span') ); //将div放在span的后面；
//$('div').appendTo( $('span') ); //和js中的appendChildren是一样的;作用是把一个节点添加到指定节点最后的位置;
//$('div').prependTo( $('span') ); //原生js中没有，作用是把一个节点添加到指定节点最开始的位置;
//insertBefore和before的区别 ：后续操作变了;主要是我们写链式操作会有影响;
//$('span').insertBefore( $('div') ).css('background','red');
$(
'div'
).before( $(
'span'
) ).css(
'background'
,
'red'
);
});
|
remove() 删除节点
|
1
2
3
|
$(
function
(){
$(
'div'
).remove();
});
|
on() off() 事件的写法：
off取消事件；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(
function
(){
/*$('div').click(function(){
alert(123);
});*/
/*$('div').on('click',function(){ //支持多个事件，支持系统事件和自定义事件
alert(123);
});*/
/*$('div').on('click mouseover',function(){ //多个事件，中间用空格
alert(123);
});*/
/*$('div').on({
'click' : function(){ //中间用冒号
alert(123);
},
'mouseover' : function(){
alert(456);
}
});*/
//点击弹出123.移入弹出456 说明on还是很灵活的
$(
'div'
).on(
'click mouseover'
,
function
(){
alert(123);
$(
'div'
).off(
'mouseover'
);
//执行后，mouseover事件会被关闭
});
});
|
scrollTop() 获取和设置滚动距离
|
1
2
3
4
5
|
$(
function
(){
$(document).click(
function
(){
alert( $(window).scrollTop() );
//获取滚动距离
});
});
|
编写弹窗效果：
首先，在DOM中创建元素是非常容易的事情；
|
1
2
|
var
oDiv = $(
'<div>div</div>'
);
//创建div元素和内容
$(
'body'
).append( oDiv );
|
弹窗效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(
function
(){
$(
'#input1'
).click(
function
(){
//动态创建元素和内容
var
oLogin = $(
'<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'
);
//中间不能有空格
$(
'body'
).append( oLogin );
//插入元素
//让弹窗居中
oLogin.css(
'left'
, ($(window).width() - oLogin.outerWidth())/2 );
//设置left值
oLogin.css(
'top'
, ($(window).height() - oLogin.outerHeight())/2 );
//设置top值
$(
'#close'
).click(
function
(){
oLogin.remove();
//移除节点
});
//在调整窗口大小事件和滚动事件，调整弹出窗的位置；
$(window).on(
'resize scroll'
,
function
(){
//在调整窗口大小事件和滚动事件
oLogin.css(
'left'
, ($(window).width() - oLogin.outerWidth())/2 );
oLogin.css(
'top'
, ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() );
//top值要注意加上滚动距离
});
});
});
|
ev pageX which
preventDefault stopPropagation
one()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
function
(){
/*$('div').click(function(ev){
//ev : jq中直接使用，是兼容后的event对象
//ev.pageX(鼠标坐标-->相对于文档的) js中是使用clientX(相对于可视区域的)
//ev.which : js中的keyCode
ev.preventDefault(); //阻止默认事件
ev.stopPropagation(); //阻止冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});*/
$(
'div'
).one(
'click'
,
function
(){
//one-->只执行事件一次
alert(123);
});
});
|
offset() position()
|
1
2
3
4
5
|
$(
function
(){
//div2.offsetLeft
//alert( $('#div2').offset().left ); //获取到屏幕的左距离 offset().left offset.top()
alert( $(
'#div2'
).position().left );
//到有定位的父级的left值,把当前元素转化成类似定位的形式,注意是不算margin的
});
|
parent() offsetParent() 获取有定位的父级
parent() : 获取父级，不管父级是否有定位； 注意这里没有加s，不是parents，jq中还有parents()方法，见下
offsetParent() : 获取有定位的父级
|
1
2
3
4
5
6
|
$(
function
(){
//parent() : 获取父级
//offsetParent() : 获取有定位的父级
//$('#div2').parent().css('background','blue');
$(
'#div2'
).offsetParent().css(
'background'
,
'blue'
);
});
|
val() 获取元素的value值；
size() 获取一组元素的长度；像length；
each() jq中的循环；原生for循环的加强版
|
1
2
3
4
5
6
7
8
|
$(
function
(){
//alert( $('input').val() ); 获取value值
//$('input').val(456); 赋值value值
alert( $(
'li'
).size() );
//4 获取一组元素的长度;像length
$(
'li'
).each(
function
(i,elem){
//一参：下标 二参 : 每个元素
$(elem).html(i);
});
});
|
拖拽jquery实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(
function
(){
var
disX = 0;
var
disY = 0;
$(
'div'
).mousedown(
function
(ev){
disX = ev.pageX - $(
this
).offset().left;
//存储距离
disY = ev.pageY - $(
this
).offset().top;
$(document).mousemove(
function
(ev){
$(
'div'
).css(
'left'
,ev.pageX - disX);
$(
'div'
).css(
'top'
,ev.pageY - disY);
});
$(document).mouseup(
function
(){
$(document).off();
//鼠标弹起的时候取消事件
});
return
false
;
//阻止默认事件和冒泡
});
});
|
hover() 模拟css中的hover，鼠标移入移除；
hover 鼠标移入和鼠标移除结合的方法；
hover(function(){},function(){})
Show() hide() 接受一个参数- -> 时间（ms） 长，宽，透明度都要变化
fadeIn() fadeOut() 淡出效果和淡出效果 改变透明度
fadeTo() 指定到一个范围，有两个参数，第一个是时间，第二个是透明度值
|
1
|
$(
'#div2'
).fadeTo(1000,0.5);
|
slideDown() slideUp() 向下展开，向上卷起；
get()方法
|
1
2
3
4
5
6
7
8
9
10
11
|
$(
function
(){
//document.getElementById('div1').innerHTML
//alert( $('#div1').get(0).innerHTML ); get需要标注下标；将jquery转成原生js
/*for(var i=0;i<$('li').get().length;i++){ //这里通过get()转成js，这里的length相对于js的
$('li').get(i).style.background = 'red';
}*/
for
(
var
i=0;i<$(
'li'
).length;i++){
//这里的length是JQ中的属性,也是使用正确的；
$(
'li'
).get(i).style.background =
'red'
;
//$('li')[i].style.background = 'red'; 得到元素后，后面加一个中括号，写成下标的形式，也就自动转成原生js的形式了;这是一种偷巧的写法；
}
});
|
outerWidth与原生的区别：
|
1
2
3
4
|
$(
function
(){
//alert( $('#div1').get(0).offsetWidth ); //这里原生js，如果把div1设置为隐藏，获取的值为0;
alert( $(
'#div1'
).outerWidth() );
//不管是显示和隐藏的，都可以获取到值;
});
|
text() 会获取所有的内容（特例），不会获取到标签，而html会获取到标签；
|
1
2
3
4
5
|
$(
function
(){
//alert( $('div').html() );
//alert( $('div').text() ); //会获取所有的内容(特例)
$(
'div'
).text(
'<h3>h3</h3>'
);
//在浏览器中会输出纯文本<h3>h3</h3>
});
|
remove()和detach（）的区别：
//remove方法删除元素的时候会把元素的操作行为也删除掉；
//detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为
|
1
2
3
4
5
6
7
|
$(
function
(){
$(
'div'
).click(
function
(){
alert(123);
});
var
oDiv = $(
'div'
).detach();
//这里如果用remove()，恢复的时候，点击行为会无效
$(
'body'
).append( oDiv );
});
|
$() : $(document).ready() 与window.οnlοad=function(){}的区别：
|
1
2
3
4
5
6
|
$(
function
(){
//等DOM加载完就可以执行了 , 性能要好
});
是
$(document).ready(
function
(){
});
的简写；
|
window.onload = function(){}; //等图片和flash等加载完才执行;
//DOMContentLoaded
parents() closest()
//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
|
1
2
3
4
5
|
$(
function
(){
//$('#div2').parents().css('background','red'); //获取到所有祖先节点 div1，body，html
//$('#div2').parents('.box').css('background','red'); //获取到class为box的祖先元素
$(
'#div2'
).closest(
'.box'
).css(
'background'
,
'red'
);
});
|
siblings() 获取元素的所有兄弟节点 ；
nextAll() 获取下面所有的兄弟节点；
preAll() 获取上面所有的兄弟节点；
parentsUntil() nextUntil() prevUntil()
//siblings() : 找所有的兄弟节点，参数也是筛选功能
//nextAll() : 下面所有的兄弟节点，参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
|
1
2
3
|
$(
function
(){
$(
'span'
).nextUntil(
'h2'
).css(
'background'
,
'red'
);
});
|
clone() 克隆节点：
|
1
2
3
4
5
6
7
8
9
|
$(
function
(){
//$('div').appendTo( $('span') ); //剪切行为
//$('span').get(0).appendChild( $('div').get(0) );
//clone() : 可以接收一个参数 ，作用可以复制之前的操作行为
$(
'div'
).click(
function
(){
alert(123);
});
$(
'div'
).clone(
true
).appendTo( $(
'span'
) );
//参数true作用可以复制之前的操作行为
});
|
wrap() wrapAll() wrapInner() unwrap() 包装，包装方法
在外面包裹一下
$('span').wrapInner('<div>'); //在span外包装div
wrapAll() 整体包装：
//wrap() : 包装
//wrapAll() : 整体包装; 会影响结构
//wrapInner() : 内部包装;
//unwrap() : 删除包装 ( 删除父级 : 不能删除body )
|
1
2
3
4
|
$(
function
(){
//$('span').wrapInner('<div>'); div在span里面了
$(
'span'
).unwrap();
});
|
add()
|
1
2
3
4
5
6
7
|
$(
function
(){
/*var elem = $('div');
var elem2 = elem.add('span');
elem.css('color','red');
elem2.css('background','yellow');*/
$(
'li'
).slice(1,4).css(
'background'
,
'red'
);
});
|
slice()
$('li').slice(1,4).css('background','red');
第一个参数是起始位置，4是结束位置（选中的不包括结束位置）；
serialize() serializeArray() 数据串连化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(
function
(){
//console.log($('form').serialize()); //string : a=1&b=2&c=3
console.log( $(
'form'
).serializeArray() );
[
{ name :
'a'
, value :
'1'
},
{ name :
'b'
, value :
'2'
},
{ name :
'c'
, value :
'3'
}
]
});
</script>
</head>
<body>
<form>
<input type=
"text"
name=
"a"
value=
"1"
>
<input type=
"text"
name=
"b"
value=
"2"
>
<input type=
"text"
name=
"c"
value=
"3"
>
</form>
|
jquery中的animate()
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400 毫秒
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(缓冲，慢快慢) linear(匀速) ) 默认是缓冲（慢快慢）
//第四个参数 : 回调函数；运行结束后，回调函数
|
1
2
3
4
5
6
7
8
|
$(
function
(){
$(
'#div1'
).click(
function
(){
$(
this
).animate({width : 300 , height : 300} , 3000 ,
'linear'
,
function
(){
alert(123);
//回调函数，也可以用链式操作来写；
});
$(
'#div2'
).animate({width : 300 , height : 300} , 3000 ,
'swing'
);
});
});
|
链式操作来写：先宽后高；和上述的回调函数效果一致；
|
1
|
$(
this
).animate({width : 300} , 2000).animate({height : 300} , 2000);
|
Stop()方法：
|
1
2
3
4
5
6
7
|
$(
'#div2'
).click(
function
(){
//$('#div1').stop(); //默认 : 只会阻止当前运动（当前步骤）
//$('#div1').stop(true); //阻止所有后续的运动
//$('#div1').stop(true,true); //立即停止到当前步骤指定的目标点，当前步骤的目标点
// stop不能做到，点一下-->直接到最后的目标点-->用finish()
$(
'#div1'
).finish();
//立即停止到所有指定的目标点，到最后的目标点
});
|
delay()
延迟
jquery中事件委托：
delegate() undelegate()
|
1
2
3
4
5
6
7
8
9
|
$(
function
(){
/*$('li').on('click',function(){
this.style.background = 'red';
});*/
$(
'ul'
).delegate(
'li'
,
'click'
,
function
(){
//事件委托
this
.style.background =
'red'
;
$(
'ul'
).undelegate();
//阻止事件委托
});
});
|
trigger() 主动触发
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(
function
(){
/*$('#div1').on('click',function(){
alert(123);
});
$('#div1').trigger('click'); //主动触发*/
$(
'#div1'
).on(
'show'
,
function
(){
alert(123);
});
$(
'#div1'
).on(
'show'
,
function
(){
alert(456);
});
$(
'#div1'
).trigger(
'show'
);
});
|
事件细节：
|
1
2
3
4
5
6
7
|
$(
function
(){
$(
'#div1'
).on(
'click'
,{name:
'hello'
},
function
(ev){
//alert(ev.data.name); 这里的ev.data等于{name:'hello'}这个整体，ev.data.name就是hello
//alert( ev.target ); 当前操作的事件源，全兼容的
alert( ev.type ); 当前操作事件类型
});
});
|
jquery的工具方法：
我们前面的都是$().css() $().html() $().val() : 只能给JQ对象用；
而实际上，我们还存在另外一种写法： 不仅可以给jquery用，也可以给原生js用；
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
type()
trim()
|
1
2
3
4
5
6
7
8
|
$(
function
(){
//var a = null;
//$.type() : 也是判断类型，功能更加强大，能判断出更多的类型
//alert( typeof a ); 原生js的判断变量类型
//alert( $.type(a) ); 用$.type()判断出更多类型，功能更强大
var
str =
' hello '
;
alert(
'('
+$.trim(str)+
')'
);
//$.trim()去除前后的空格
});
|
inArray() 类似于 indexOf
proxy() 改变this指向；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(
function
(){
//var arr = ['a','b','c','d'];
//alert( $.inArray('b',arr) ); //b在array这个数组中的位置；若没有会返回-1；有的话就返回位置
//proxy() : 改变this指向的
function
show(n1,n2){
alert(n1);
alert(n2);
alert(
this
);
}
//show();
//$.proxy(show , document)(); //show的this指向document
//$.proxy(show , document,3,4)(); //对于传参，传参可以这样传
$.proxy(show , document,3)(4); //也可以这样混着传参
//jquery中为什么要这样传参呢？
//$(document).click( $.proxy(show,window)(3,4) ); //如果这样传参，刷新就直接调用函数
$(document).click( $.proxy(show,window,3,4) );
//这样传参，就是在click后才会调用函数，而不会直接调用；
});
|
$.noConflict() 防止冲突
//$ , jQuery $=jQuery 一回事 $不是jQuery独有的
|
1
2
3
4
5
6
|
//noConflict() : 防止冲突的
var
aaa= $.noConflict();
var
$ = 10;
aaa(
function
(){
aaa(
'body'
).css(
'background'
,
'red'
);
});
|
parseJSON() 把字符串转换成json类型
|
1
2
|
var
str =
'{"name":"hello"}'
;
//字符串必须是严格的JSON格式
alert($.parseJSON( str ).name);
//把字符串转换成json
|
makeArray()
|
1
2
3
4
|
window.onload =
function
(){
var
aDiv = document.getElementsByTagName(
'div'
);
//只是集合，不是真正的数组，我们叫做类数组（类似于数组）
$.makeArray(aDiv).push();
//通过 $.makeArray(aDiv) 把 类数组 转换成 真正的数组
};
|
jquery中使用ajax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script>
/*$.ajax({
url : 'xxx.php',
data : 'name=hello&age=20',
type : 'POST', //默认是get
success : function(data){ //请求成功以后的回调函数
alert(1);
},
error : function(){ //请求失败之后
alert(2);
}
});*/
$.get(
'xxx.php'
,
function
(){
//ajax的get请求可用get()，第一个是地址，第二个是成功后回调
});
// $.get()和$().get()是有区别的；前者是ajax的get请求方法，后者是将jQuery对象转换成js原生对象
$.post(
'xxx.php'
,
function
(){
});
$.getJSON(
'xxx.php?callback=?'
,
function
(data){
//请求json类型的数据,支持jsonp的形式：指定?callback=?
data
});
随机({});
</script>
|
jQuery中的插件
扩展插件
//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
用插件实现去掉左空格
|
1
2
3
4
5
6
7
|
$.extend({
leftTrim :
function
(str){
return
str.replace(/^\s+/,
''
);
//这里用正则来去掉左空格
}
});
var
str =
' hello '
;
alert(
'('
+$.leftTrim(str)+
')'
);
//利用leftTrim去掉左空格
|
|
1
2
3
4
5
6
7
8
9
|
$.extend({
//用extend，json的写法，可以扩展多个
leftTrim :
function
(str){
return
str.replace(/^\s+/,
''
);
//这里用正则来去掉左空格
},
rightTrim :
function
(){},
aaa :
function
(){
alert(1);
}
});
|
$.fn.extend({ //也是写成json形式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
drag :
function
(){
//这里扩展拖拽
//this : $('#div1')
var
disX = 0;
var
disY = 0;
var
This =
this
;
//这里将this存入变量This中；
this
.mousedown(
function
(ev){
disX = ev.pageX - $(
this
).offset().left;
disY = ev.pageY - $(
this
).offset().top;
$(document).mousemove(
function
(ev){
This.css(
'left'
, ev.pageX - disX);
This.css(
'top'
, ev.pageY - disY);
});
$(document).mouseup(
function
(){
$(
this
).off();
});
return
false
;
});
},
aaa :
function
(){
alert(2);
}
});
|
|
1
2
3
4
5
6
7
8
9
|
//$.trim()
//$.leftTrim()
/*var str = ' hello ';
alert( '('+$.leftTrim(str)+')' );*/
$(
function
(){
$(
'#div1'
).drag();
//这里调用上面插件的扩展
});
$.aaa();
// 1
$().aaa();
//2
|
扫一扫
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
