jQuery原理:
1.js对象和jquery对象的区别:
jquery就是js中的new Object生成的普通对象
2.js对象和jquery对象的方法能不能共用?
不能共用
3.js对象和jquery对象能不能互换? 能
1).js对象->jquery对象
$(dom);
2).jquery对象->js对象
$('h1')[1];
输出 <li> 元素的数目:
获得第一个 p 元素的名称和值:
6.index();
获得被点击的 <li> 元素相对于它的同级元素的 index:
向元素附加数据,然后点击变成该数据:
给所有P元素加样式
给类为hid的元素加样式
给所有的元素加样式
给p元素,h1元素加样式
给类为div1祖先的后代h1加样式
给类为div1父亲的孩子h1加样式
给类为div1的元素的后一个h1加样式
给类为div1的元素后面全部的h1加样式
1):first
第一个h1
最后一个h1
除了第一个h1
偶数的h1
奇数的h1
等于2的h1
给有孩子的父亲加样式 (空格也算)
给空的h1加内容加样式
1)[name]
给有name属性的h1加样式
给name等于user1的h1加样式
给name不等于user1的h1加样式
给name等于user开头的h1加样式
给name等于123结尾的h1加样式
给包含u的name加样式
给有name 并且有age的h1加样式
1):nth-child
每一个div里面的第2个h1 (从1开始数而不是0)
每一个div里面的第一个h1
每一个div里面的最后一个h1
只有一个h1的div
1):input
2):text
3):password
4):radio
5):checkbox
6):submit
7):reset
8):button
9):file
10):hidden
例子表单验证
1.给表单元素设置blur事件的验证条件
2.当表单提交时可以触发所有表单元素的blur事件
3.把所有表单元素进行综合判断看是否有问题
8.表单属性
1):checked 找到被选中的
2):selected
全选
筛选选择器:
1.过滤
eq();
first();
last();
not();
slice();
例子:找到第一个h1标签给样式
2.查找
children(); 子元素
find(); 所有后代查找
next(); 下一个兄弟元素 ,
nextAll(); 后面的所有元素
parent(); 父元素
prev(); 上一个元素
prevAll(); 前面的所有元素
siblings(); 前后所有的兄弟
3.串联
add(); 组合
andSelf();
例子:给H1标签和P标签样式
$('h1').add('p').css({'color':'#00f'});
通过div找到下一个在带上自己,这样都给到样式
$('div').next().andSelf().css({'color':'#00f'});
属性选择器:
1.属性:
attr();设置属性
例:attr({'src':'b.png' })
attr();获取属性值
例: alert($(this).attr('src'));
2.CSS类:
addClass();
removeClass();
提前写好一个类的style,再往标签身上加减类
toggleClass();
有的就减,没有的就加,切换类
3.HTML代码:
html(); 取值
html(val); 赋值
例子:val=$('.d1').html();
$('.d2').html(val);
把类d1里面的值赋给类d2.
4.文本
text();
text(val);
5.值
val();
val(val);
表单元素获取和赋值 例:
把input里面的第一个值取出来,赋值给第二个
1.内部追加
append(); 尾部追加
appendTo();
prepend(); 头部追加
prependTo();
例:点击把div1里面的h1追加到div2尾部
after();
insertAfter();
before();
insertBefore();
例:点击把div1里面的h1插入到div2后面
$('.div1 h1').click(function(){
//$('.div2').after($(this));
$(this).insertAfter('.div2');
})
例:点击把div1里面的h1插入到div2前面
$('.div1 h1').click(functuion(){
//$('.div2').before($(this));
$(this).insertBefore('.div2');
})
2.外部插入 (插入后是兄弟关系)
after();
insertAfter();
before();
insertBefore();
例:点击把div1里面的h1插入到div2后面
wrap(); 外包围
wrapInner(); 内包围
wrapAll; 外部全包围
例子:
$('p').wrap('<i></i>'); 在每一个p标签外包围<i>标签 斜体
$('p').wrapInner('<i></i>'); 在每一个p标签内包围<i>标签 斜体
$('p').wrapAll('<i></i>'); 在全部的p标签外包围<i>标签 斜体
4.替换
replaceWith();
replaceAll();
例子:
$('p').replaceWith('<h1>linux</h1>'); 把所有的p标签换成h1标签 (不替换内容)
$('<h1>linux</h1>').replaceAll('p'); 用h1标签换掉p标签 (不替换内容)
clone();
clone(true);
例子:点击图片复制一份在自己的后面(不复制事件)
1.css样式
css();
css({});
2.位置
offset(); 偏移量
position();
scrolltTop(val);
例子:
offset获取鼠标离左上角的实际距离
$(window).height();
文档的总高度
$(document).height();
屏幕滚动的高
$(window).scrollTop();
0.js加载执行的时机
1)DOM加载完毕
把js标签放在body之后即可
2)资源加载完毕
1.页面载入
$(document).ready(fn);
$(fn);
两个一样 ,ready淘汰了不常用
bind(); 绑定事件
one();
unbind(); 解除事件,没有就全部解除
例子:给图片绑定事件和解除事件
live();通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
die();移除所有通过 live() 方法添加的事件处理程序:
4.事件切换
hover(); 鼠标循环移入和移出
toggle(); 循环单击
例子循环单击
效果:
1.基本
show(time); 显示
hide(time); 隐藏 可以加时间
toggle(time); 显示就隐藏,隐藏就显示
2.滑动
slideDown(time); 滑上消失
slideUp(time); 滑下显示
slideToggle(time);
例子:点击h1标签,他下面的p标签就滑上滑下
fadeOut(time); 淡出
fadeIn(time); 淡入
fadeTo(); 淡出到透明度,不完全
例子点击淡入淡出
4.自定义
animate();
例子:点击按钮图片左滑
1.$get();
2.$post();
例子:get访求 无刷新删除数据库里的数据
1.isArray(); 判断是否为数组 true/false
2.isFunction(); 判断是否为函数 true/false
3.isEmptyObject();判断是否为空对象
4.trim();去掉空格
5.param();
6.serializa();
例子:判断是否是数组
判断是否是空对象
1.js对象和jquery对象的区别:
jquery就是js中的new Object生成的普通对象
2.js对象和jquery对象的方法能不能共用?
不能共用
3.js对象和jquery对象能不能互换? 能
1).js对象->jquery对象
$(dom);
2).jquery对象->js对象
$('h1')[1];
$('h1').get(1);
jquery核心方法:
1.each(); 遍历
输出每个 li 元素的文本:
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
2.size();
输出被 jQuery 选择器匹配的元素的数量:
$("button").click(function(){
alert($("li").size());
});
3.length();
输出 <li> 元素的数目:
$("button").click(function(){
alert($("li").length);
});
4.get();
获得第一个 p 元素的名称和值:
$("button").click(function(){
x=$("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});
5.get(index);
6.index();
获得被点击的 <li> 元素相对于它的同级元素的 index:
$("li").click(function(){
alert($(this).index());
});
7.data();
向元素附加数据,然后点击变成该数据:
$('h1').each(function(i){
$(this).data({'num':i+1});
});
$('h1').click(function(){
$(this).html($(this).attr('num'));
})
选择器:
1.基础
1)#id
给id为hid的元素加样式
$('#hid').css({'color':'#00f'});
2)ele 元素选择器
给所有P元素加样式
$('p').css({'color':'#00f'});
3).class
给类为hid的元素加样式
$('.hid').css({'color':'#00f'});
4)*
给所有的元素加样式
$('*').css({'color':'#00f'});
5)sel1,sel2 组合选择器
给p元素,h1元素加样式
$('p,h1').css({'color':'#00f'});
2.层级
1)ancestor descendant 祖先 后代给类为div1祖先的后代h1加样式
$('.div1 h1').css({'color':'#00f'}
2)parent > child
父 子
给类为div1父亲的孩子h1加样式
$('.div1 h1').css({'color':'#00f'});
3)prev + next
前一个 后一个
给类为div1的元素的后一个h1加样式
$('.div1+h1').css({'color':'#00f'});
4)prev ~ sibings 前一个 后面所有的
给类为div1的元素后面全部的h1加样式
$('.div1~h1').css({'color':'#00f'});
3.基本
1):first
第一个h1
$('h1:first').css({'color':'#00f'});
2):last
最后一个h1
$('h1:last').css({'color':'#00f'});
3):not
除了第一个h1
$('h1:not(:first)').css({'color':'#00f'});
4):even
偶数的h1
$('h1:even').css({'color':'#00f'});
5):odd
奇数的h1
$('h1:odd').css({'color':'#00f'});
6):eq 等于
等于2的h1
$('h1:eq(2)').css({'color':'#00f'});
7):gt 大于
大于1的h1
$('h1:gt(1)'.css({'color':'#00f'});
8):lt 小于
小于1的h1
$('h1:lt(1)').css({'color':'#00f'});
4.内容
1):has
给有h1标签的div加样式
$('div:has(p)').css({'color':'#00f'});
2):parent
给有孩子的父亲加样式 (空格也算)
$('div:parent').css({'color':'#00f'});
3):empty
给空的h1加内容加样式
$('h1:empty').html('aaaaaaa').css({'color':'#00f'});
5.属性
1)[name]
给有name属性的h1加样式
$('h1[name]').css({'color':'#00f'});
2)[name=user1]
给name等于user1的h1加样式
$('h1[name=user1]').css({'color':'#00f'});
3)[name!=user1]
给name不等于user1的h1加样式
$('h1[name!=user1]').css({'color':'#00f'});
4)[name^=user]
给name等于user开头的h1加样式
$('h1[name^=user]').css({'color':'#00f'});
5)[name$=user]
给name等于123结尾的h1加样式
$('h1[name$=123]').css({'color':'#00f'});
6)[name*=er]
给包含u的name加样式
$('h1[name*=u]').css({'color':'#00f'});
7)[name=user1][name*=er]
给有name 并且有age的h1加样式
$('h1[name][age]').css({'color':'#00f'});
6.子元素
1):nth-child
每一个div里面的第2个h1 (从1开始数而不是0)
$('div h1:nth-child(2)').css({'color':'#00f'});
2):first-child
每一个div里面的第一个h1
$('div h1:first-child').css({'color':'#00f'});
3):last-child
每一个div里面的最后一个h1
$('div h1:last-child').css({'color':'#00f'});
4):only-child
只有一个h1的div
$('div h1:only-child').css({'color':'#00f'});
7.表单
1):input
2):text
3):password
4):radio
5):checkbox
6):submit
7):reset
8):button
9):file
10):hidden
例子表单验证
1.给表单元素设置blur事件的验证条件
2.当表单提交时可以触发所有表单元素的blur事件
3.把所有表单元素进行综合判断看是否有问题
8.表单属性
1):checked 找到被选中的
2):selected
全选
$(':checkbox').attr({'checked':true});
全不选
$(':checkbox').attr({'checked':false});
反选
$(':checkbox').each(function(){
this.checked=!this.checked;
})
有this就要用筛选选择器
筛选选择器:
1.过滤
eq();
first();
last();
not();
slice();
例子:找到第一个h1标签给样式
$('h1').eq(0).css({'color':'#00f'});
除了第一个h1其他的给样式
$('h1').not($('h1').eq(0)).css({'color':'#00f'})
找到第一个h1标签给样式
$('h1').first().css({'color':'#00f'});
找到最后一个h1标签给样式
$('h1').last().css({'color':'#00f'});
从开始到结束但不包含最后一个
$('h1').slice(1,4).css({'color':'#00f'});
2.查找
children(); 子元素
find(); 所有后代查找
next(); 下一个兄弟元素 ,
nextAll(); 后面的所有元素
parent(); 父元素
prev(); 上一个元素
prevAll(); 前面的所有元素
siblings(); 前后所有的兄弟
3.串联
add(); 组合
andSelf();
例子:给H1标签和P标签样式
$('h1').add('p').css({'color':'#00f'});
通过div找到下一个在带上自己,这样都给到样式
$('div').next().andSelf().css({'color':'#00f'});
属性选择器:
1.属性:
attr();设置属性
例:attr({'src':'b.png' })
attr();获取属性值
例: alert($(this).attr('src'));
2.CSS类:
addClass();
removeClass();
提前写好一个类的style,再往标签身上加减类
toggleClass();
有的就减,没有的就加,切换类
3.HTML代码:
html(); 取值
html(val); 赋值
例子:val=$('.d1').html();
$('.d2').html(val);
把类d1里面的值赋给类d2.
4.文本
text();
text(val);
5.值
val();
val(val);
表单元素获取和赋值 例:
把input里面的第一个值取出来,赋值给第二个
val=$('input').eq(0).val();
$('input').eq(1).val(val);
文档处理:
1.内部追加
append(); 尾部追加
appendTo();
prepend(); 头部追加
prependTo();
例:点击把div1里面的h1追加到div2尾部
$('.div1 h1').click(functuion(){
// $('.div2').append($(this)); //找到类div2把this追加
$(this).appendTo('.div2'); //找到this追加到类div2
})
例:点击把div1里面的h1追加到div2头部
$('.div1 h1').click(functuion(){
// $('.div2').prepend($(this));
$(this).prependTo('.div2');
})
2.外部插入 (插入后是兄弟关系)
after();
insertAfter();
before();
insertBefore();
例:点击把div1里面的h1插入到div2后面
$('.div1 h1').click(function(){
//$('.div2').after($(this));
$(this).insertAfter('.div2');
})
例:点击把div1里面的h1插入到div2前面
$('.div1 h1').click(functuion(){
//$('.div2').before($(this));
$(this).insertBefore('.div2');
})
2.外部插入 (插入后是兄弟关系)
after();
insertAfter();
before();
insertBefore();
例:点击把div1里面的h1插入到div2后面
$('.div1 h1').click(function(){
//$('.div2').after($(this));
$(this).insertAfter('.div2');
})
例:点击把div1里面的h1插入到div2前面
$('.div1 h1').click(functuion(){
//$('.div2').before($(this));
$(this).insertBefore('.div2');
})
3.包围
wrap(); 外包围
wrapInner(); 内包围
wrapAll; 外部全包围
例子:
$('p').wrap('<i></i>'); 在每一个p标签外包围<i>标签 斜体
$('p').wrapInner('<i></i>'); 在每一个p标签内包围<i>标签 斜体
$('p').wrapAll('<i></i>'); 在全部的p标签外包围<i>标签 斜体
4.替换
replaceWith();
replaceAll();
例子:
$('p').replaceWith('<h1>linux</h1>'); 把所有的p标签换成h1标签 (不替换内容)
$('<h1>linux</h1>').replaceAll('p'); 用h1标签换掉p标签 (不替换内容)
5.删除
empty();
remove();
detach();
例子:
把标签内容清空 (标签还在)
$('p').click(function(){
$(this).empty();
//$(this).html(''); 与empty效果相同
})
把标签移除 (标签没有了)
$('p').click(function(){
$(this).remove();
})
把标签移除 带事件 (标签没有了)$('p').click(function(){
$(this).detach();
})
6.复制
clone();
clone(true);
例子:点击图片复制一份在自己的后面(不复制事件)
$('img').click(function(){
$(this).after($(this).clone());
})
点击图片复制一份在自己的后面(复制事件)
$('img').click(function(){
$(this).after($(this).clone(true));
})
CSS处理:
1.css样式
css();
css({});
2.位置
offset(); 偏移量
position();
scrolltTop(val);
例子:
offset获取鼠标离左上角的实际距离
$('div').mouseenter(function(){
x=$(this).offset().left;
y=$(this).offset().top;
alert(x+'||'+y);
})
position相对于父元素的定位
$('div').mouseenter(function(){
x=$(this).position().left;
y=$(this).position().top;
alert(x+'||'+y);
})
可视区域的高
$(window).height();
文档的总高度
$(document).height();
屏幕滚动的高
$(window).scrollTop();
3.尺寸
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
例子:获取图片的宽高
$('img').click(function(){
w=$(this).width();
H=$(this).height();
alert(w+'||'+h);
})
获取宽高+padding$('img').click(function(){
w=$(this).innerWidth();
H=$(this).innerHeight();
alert(w+'||'+h);
})
获取宽高+padding+border$('img').click(function(){
w=$(this).outerWidth();
H=$(this).outerHeight();
alert(w+'||'+h);
})
事件:
0.js加载执行的时机
1)DOM加载完毕
把js标签放在body之后即可
2)资源加载完毕
$(window).load(function(){
//代码
});
3)jQuery中实现等DOM加载完毕?
$(function(){
//所有代码都是等DOM加载完毕才会去执行
})
1.页面载入
$(document).ready(fn);
$(fn);
两个一样 ,ready淘汰了不常用
$(function(){
//所有代码都是等DOM加载完毕才会去执行
})
2.事件处理
bind(); 绑定事件
one();
unbind(); 解除事件,没有就全部解除
例子:给图片绑定事件和解除事件
$('button').eq(0).click(function(){
$('img').bind('click',function(){
//代码
});
})
$('button').eq(1).click(function(){
$('img').unbind('click');
});
给图片只绑定一次事件 //实现点赞功能
$('button').eq(0).click(function(){
$('img').one('click',function(){
//代码
});
})
点左键弹出0,点滚轮弹出1,点右键弹出2
$(document).mousedown(function(event){
code=event.button;
alert(code);
)}
鼠标坐标
$(document).mousemove(function(event){
x=event.clientX;
y=event.clientY;
document.title=x+'-'+y;
});
制作右键菜单要用contextmenu和return false
$(document).contextmenu(function(event){
return false;
)};
3.事件委派
live();通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)。
die();移除所有通过 live() 方法添加的事件处理程序:
4.事件切换
hover(); 鼠标循环移入和移出
toggle(); 循环单击
例子循环单击
$('img').toggle(
function(){
this.src='b.png';
}
function(){
this.src='a.png';
}
)
鼠标循环移入和移出
$('img').hover(
function(){
this.src='b.png';
}
function(){
this.src='a.png';
}
)
效果:
1.基本
show(time); 显示
hide(time); 隐藏 可以加时间
toggle(time); 显示就隐藏,隐藏就显示
2.滑动
slideDown(time); 滑上消失
slideUp(time); 滑下显示
slideToggle(time);
例子:点击h1标签,他下面的p标签就滑上滑下
$('h1').click(function(){
d=$(this).next().css('display');
if(d=='block'){
$(this).next().slideUp();
}else{
$(this).next().slideDowm();
}
});
上面的代码用slideToggle()写就两行;
$('h1').click(function(){
$(this).next().slideToggle();
});
3.淡入淡出
fadeOut(time); 淡出
fadeIn(time); 淡入
fadeTo(); 淡出到透明度,不完全
例子点击淡入淡出
$('h1').click(function(){
d=$(this).next().css('display');
if(d=='block'){
$(this).next().fadeOut();
}else{
$(this).next().fadeIn();
}
});
淡出到0.5透明度
$('h1').click(function(){
$(this).fadeTo(1000,0.5);
}
4.自定义
animate();
例子:点击按钮图片左滑
$('button').click(function(){
$('img').animate({
'margin-left':'-1300px',
'opacity':0,
},1000);
});
ajax请求:
1.$get();
2.$post();
例子:get访求 无刷新删除数据库里的数据
$('.del').click(function(){
id=this.id;
obj=$(this);
})
//ajax通讯
$.get('delete.php',{id:id},function(r){
if(r=='1'){
obj.parent().parent().fadeOut(100);
}
}
post请求
$('.del').click(function(){
id=this.id;
obj=$(this);
})
//ajax通讯
$.post('delete.php',{id:id},function(r){
if(r=='1'){
obj.parent().parent().fadeOut(100);
}
}
工具:
1.isArray(); 判断是否为数组 true/false
2.isFunction(); 判断是否为函数 true/false
3.isEmptyObject();判断是否为空对象
4.trim();去掉空格
5.param();
6.serializa();
例子:判断是否是数组
arr=[1,3,5,6];
alert($.isArray(arr));
判断是否是函数
function show(){
alert(222);
}
alert($.isFunction(show))
判断是否是空对象
obj={'name':'user1'}
alert($.isEmptyObject(obj));
去掉字符串起始和结尾的空格。
str=' asdas ' ;
alert($.trim(str).length) // 应该是5
param把json对象转成url参数
obj={'name':'user1','age':'20'};
str=$.param(obj);
alert(str); //结果name=user1&age=20
serialize把表单的属性和值转成url参数字符串,方便ajax使用
$(':button').click(function(){
str=$('form').serialize();
alert(srt);
}); // 表单用户名为user1,密码为456,则弹出username=user1&password=456