- jQuery框架
jQuery是JavaScript框架
jQuery功能:HTML标签选取,标签操作,css操作,事件操作,动画设置,DOM操作,Ajax等。
jQuery是轻量级 核心思想“写的少,做的多”
二.jQuery的语法
$:表示jQuery框架的标示符
基本方法:$(选择器或标签对象).方法();
三.jQuery选择器
Id选择器:$(“#id选择器的名字”)
Class选择器:$(“.class名字”);
标签选择器:$(“标签名”);
通配符:$(“*”):选取所有的标签
分组:$(“div,h1”):选取div 和h1
派生:$(“div h2”); 选取div中的h2
选取当前标签:$(this);
$(“p:first”);选取第一个p标签
后代:$(“ul li:first”);选取第一个ul中第一li标签
$(“ul li:first-child”);选取每个ul的第一个li标签
$(“[属性]”):选取带有此属性的标签;$(“[hover]”);选取到a的标签
$(“标签名[属性=’值’]”); 选取此属性=’值’的标签
比如:$(“a[target=’_blank’]”);选取a标签中的target的值是_blank的标签;
$(“div:even”);下标的偶数的位置的div标签
$(“div:odd”):下标的奇数位置的div标签
$(“div:eq(0)”); 选取下标位置为0的位置
- 预加载
//加载完页面标签之后,再加载jQuery方法
$(document).ready(function () {
//事件绑定,到标签
});
//简写
$(function () {
});
目的:
- 代码是从下往上执行,防止提前运行jQuery方法,先加载document:DOM文档对象模型,页面中的标签
- 先加载页面中的标签,在加载或者运行jQuery方法
JavaScript中
Onload事件:<body οnlοad=””></body>
等所有标签和属性等加载完才开始加载: 更慢
JS中:window.οnlοad=function(){}; 等标签加载完就加载 :更快
注意:jQuery预加载的速度比 onload更早
jQuery预加载,只用加载DOM标签之后,就会执行,
Onload等所有的内容都加载完成,才会执行
- 常用的jQuery事件
以JavaScript中的事件的on后的动作作为jquery事件的方法名
点击事件:click();
双击 dblclick();
鼠标悬停事件:mouseenter()
鼠标移开事件:Mouseleave();
键盘事件:keydown(),keyup();
表单事件:获取焦点:foucs 失去焦点:blur();表单提交 submit()
值发生改变change()
//hover():模拟悬停的方法
//hover(悬停的方法,离开的方法);
$("#p1").hover(function () {
alert("悬停");
},function () {
alert("离开");
});
2.使用事件的语法
指定绑定的事件的对象:$(选择器)
绑定事件:$(选择器).事件名(function(){
//事件触发的方法
});
Click();
Eg:$(“#id”).click(function(){
$(this).css(“color”,”red”),
});
- jQuery效果
隐藏与 显现
Hide() 和 show();
Hide(时间,方法执行完后调用的方法);
Toggle();在隐藏和显示之间切换
淡入淡出 (轮播)
实现元素的淡入淡出的四种方法:
Fadeln()淡入以隐藏的元素 显现 以透明度的方式0到1
fadeOut()淡出以显现的元素 隐藏 以透明度的方式1到0
fadeToggle() :切换淡入 淡出
fadeTo():渐变成给定透明度的值(0-1之间)
Fadeln()淡入:已经隐藏的元素
Fadeln(时间,回调函数);
时间:毫秒,”fast”, ”swing”
$("#d3").fadeTo(3000,0.2,"linear",function () { alert(123);});
fadeTo(时间,透明度值,速度,回调函数); 实际调用animate({opcity:b})方法
滑动
滑动方法:
slideDown():向下滑动显示
slideUp():向上滑动隐藏
sllideToggle():滑动切换隐藏与显现。
语法:slideDown():
Animate({属性},时间,速度,回调函数);
备注:色彩动画不能设置,包括字体颜色
$("#d1").animate({width:"+=100px",height:"toggle",background:"#999"},1000,"swing");
可使用相对值:比如-=10px; +=10px;
可切换值:height:”toggle”;
Toggle:从0到当前值的切换
//可添加多个animate方法,按照animate顺序执行
jQuery中HTML操作
$(“#id”).html(“内容”); 多个累加:$(“#id”).append(“内容”);
for (var i =1;i<city.length;i++){
bottom_1.append(city[i]);
}
而JavaScript中
用innerHTML