jQuery Api:
http://www.css88.com/jqapi-1.9/animate/
官网:
www.jquery.com
demo:
www.jq22.com
百度静态资源库:
http://cdn.code.baidu.com/
常用插件连接如bootstrap等
1.JQuery: 导库文件:jquery-3.1.1.min.js
优点:1.对js做了封装,屏蔽浏览器之间的差异
2.书写简便,写的更少,做的更多
3.对ajax做了封装
页面中优先执行jquery(比onload先执行),并且不会被覆盖
页面加载完执行:
a.$(function(){ alert("jqqq") }; );
b.
$(
document
).ready(
function
(){
alert(
"jquery03"
);
});
2.js与jquery获取元素区别
var jsGet=document.getElementById("uname").value;
var jqGet=$("#uname").val();
var divText=$("#uname").text(); //jq获取div文本
var divText=document.getElementById("uname").innerText; //js获取div文本
var divHtml=$("
#uname
").html(); //jq获取html
var divHtml=document.getElementById("uname").innerHTML; //js获取html
$("
#uname
").html("<h3>文本</h3>");
document.getElementById("uname").innerHTML="<h4>文本</h4>";
var html01=document.getElementById("sss").attributes["id"].value;
var html02=$("#sss").attr("id");
$("
#uname
").attr("id"); //获取id属性
$("
#uname
").attr("id","div02"); //设置id属性,div02
3
.JQ转JS: 转成JS后可以调用JS的方法和属性
1.[0]下标获取
var tojs=$("#uname")
[0]
;
alert(tojs.value);
2.get方法获取
var tojs02=$("#uname")
.get(
0)
;
alert(tojs02.value);
JS转JQ:可以使用JQ的方法和属性
1.var tojq=$(document.getElementById("unameId"));
4.选择器:css中的选择基本都可以使用
//选择id
$("#id");
//类选择
$(".class").css("background-color","red"); //修改样式
//元素选择
$("div").css("background-color","red");
//全部选择
$("*").css("background-color","red");
//组合选择
$("#mid,h2").css("background-color","aqua"); //选取id为mid和h2
//包含选择
var mcontain=$("#mid h2").css("background-color","aqua"); //选取mid的h2
//子包含
$(
"#mid>h2"
).
css
(
"background-color"
,
"aqua"
); //
选取mid的
h2
//选择下一个同级元素(元素类型要相同)
$(
"#mid+div"
).
css
(
"background-color"
,
"aqua"
);
//选择当前元素下所有同级元素
$(
"#mid~div"
).
css
(
"background-color"
,
"aqua"
);
5.修改样式属性:
a)对象.css("样式","样式的值");
$(
".class"
).
css
(
"background-color"
,
"red"
);
b)对象.addClass("mclass");
$(".class").addClass("myclass");
.myclass{
width:100px;
}
$(".class").removeClass("myclass other"); //移除myclass 和other样式
$(".class").toggleClass("myclass"); //切换样式
6.操作dom节点:
//添加节点
var old=$("#oid");
var var01=
$("<li title='pingguo'>苹果</li>");
old.append(var01);
//移除节点
old.remove(); //移除全部
//移除子节点
old.empty()
//复制节点
$("#old li").click(function(){
$(this).clone().appendTo(old); //复制追加到old节点之下
});
//替换
$("#appleId").replaceWith("<li>orange</li>");
7.事件绑定:
//单个事件绑定
$(function(){
$("#mid02").bind("click",function(){
$("#mid02").css("color","red");
});
});
$("#mid02").show(); //显示元素
//多个事件绑定
$(function(){
$("#mid02").bind("click",function(){
$("#mid02").css("color","red");
}).bind("mouseenter",alertInfo=function(){
alert("aaaa");
});
});
//取消绑定
function ubindss(){
$("#mid02").unbind("mouseenter",
alertInfo
); //动态取消绑定
alertInfo
}
}
8.动画效果:
$("#div01").show(3000); //3秒显示
$("#div01").hide(3000); //3秒隐藏
$("#div01").slideDown(); //从上到下3秒显示
$("#div01").slideUp(); //从下到上3秒显示
$("#div01").fadeIn(); //淡入,慢慢加载进来
$("#div01").fadeOut(); //淡出
9.左边移动到右边
$(function(){
$("#btnRight").bind("click",function(){
var toR=$("#sel002");
$("#sel001 option:selected").appendTo(toR); //选项被选中
});
});
10. jquery底层原理
jquery底层是一个闭包(匿名自调用函数)
格式:
(function(形参){
alert(形参);
})(实参);
(function(num){
alert(num);
})(123);
为什么使用$作为开头:window.jQuery=window.$=JQuery;
11.
$(this)和this关键字在Jquery区别
// this其实是一个Html 元素。
能调用元素属性,例如this.id,this.value。
// $this 只是个变量名,加$是为说明其是个jquery对象。$(this)
能调用jquery的方法,例如click(), keyup()。