正文
jQuery知识点小结
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
博主之前学习一段时间后做了点Demo，借此机会发出来分享，其实学jQuery只要简单看看文档即可，但有些细枝末节的东西文档会默认使用者是了解的，所以还是得系统学习系统训练；Talk is cheap,let me show the code.
TIP：我常用的API
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//$(); 调用核心函数 //用js原生的入口函数时，在加载完DOM和图片后才会调用，但jQuery在DOM加载之后，图片加载之前就执行了；
Window.onload = function(ev){
//do
} //js原生的入口函数会相互覆盖，但jQuery时顺序执行的； //接收一个函数,若为function则时入口函数:
$(function(){
//do
}); //接收字符串选择器，并封装成jQuery对象
$(function(){
var $box1 = $(".box1");
var $box2 = $("#box2");
});
//接收一个代码片段,自动创建对应的元素并返回
$(function(){
var $p = $('<p>"段落"</p>');
console.log($p.html());
});
//接收一个元素 $(function(){
var span = document.getElementByTagName("span")[0];
var $span = $(span); //jQuery将span封装成jQuery对象并返回
});
</script>
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script> //jQuery是以伪数组存储对象的，有length属性；
//伪数组：0~length-1，长度为length //定义一个类：
function ClassA(){ }
//增加一个静态方法并调用：
ClassA.staticMethod = function(){
//do
}
ClassA.staticMethod(); //创建普通方法,创建实例并调用:
ClassA.prototype.instanceMethod = function(){
//do
}
var a = new ClassA();
a.instanceMethod(); //forEach方法,不能在伪数组上用,但each可以,each的默认返回值就是遍历的类型，不支持自定义返回值
var arr = [1, 2, 3, 4, 5];
var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
arr.forEach(function(value, index){
//do
});
$.each(obj, function (index, value) {
//do
}) //原生map不能遍历伪数组，但jQuery的map方法可以，map默认的返回值是新的空数组，也可自定义返回值
arr.map(function(value, index, array){
//do
});
$.map(obj, function (value, index){
return value+index;
}); //trim
var str = " ins ";
var str1 = $.trim(str); //判断是否为窗口对象
var w = window;
var res = $.isWindow(str); //判断是否为真数组
var array = $.isArray(arr); //判断是否为函数,下面都为true
var fun = $.isFunction(ClassA);
var func = $.isFunction(jQuery); //jQuery就是一个匿名函数，是立即执行的
(function(window, undefined){
//jQuery的内部
})(window);
</script>
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//holdReady可以暂停入口函数的执行
$.holdReady(true);
$(document).ready(function(){
//do
$.holdReady(false);//回复执行入口函数
});
</script>
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//empty选择器找到元素下没有 子元素 和 内容 的元素集合
var $e = $("div:empty"); //parent选择器找到多有含有 子元素 或 文本的元素集合
var $p = $("div:parent"); //contains选择器找到所有 含有 对应文本内容 的元素集合
var $c = $("div:contains('文本内容')"); //has选择器找到所有 含有 对应子元素的元素集合
var $h = $("div:has('span')"); //操作属性
p.name = "AAA";
p["name"] = "BBB";
console.log(p.name); //设置属性节点,只有DOM对象才有属性节点
span.setAttribute("属性名","属性值");
span.getAttribute("属性名"); /*jQUery的attr(name|pro|kry, val|fn)
作用：获取或设置属性节点的值
传递一个参数时，代表只获取 第一个元素 属性节点的值
传递两个参数时，代表设置所有元素的属性节点值
常用于多元属性
*/
$("span").attr("class");
$("span").attr("id","s"); //jQuery的removeAttr("name")：删除所有元素的一个或多个属性节点
$("span").removeAttr("class name"); //jQUery的prop(name|properties|key,value|fn):常用于两元属性（只有true和false）
$("span").eq(0).prop("name", "CCC"); //eq(0)指选择找到元素伪数组的第一个元素,若没有name属性，则新增并赋值 //removeProp(name)
$("span").removeProp("name"); </script>
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script> $(function(){ //addClass():动态增加CSS样式类,bootstrap就可以这样用，多个用空格隔开
$().addClass("class1"); //removeClass():删除类属性,也可删除多个
$().removeClass("sr-only"); //toggleClass():没有就添加，有就删除
$().toggleClass("class2");
}); //html():相当于innerHTML,有内容就是添加，没有就是获取
$().html(); //text():相当于innerText
$().text(); //val():相当于value
$().val(); //操作CSS样式的方法： //css的注意点：链式操作如果大于三步，则要分开写，否则可读性很差
$().css("width", "50px").css("height", "50px");
$().css({
width: 50px;
height: 50px;
});
var $css = $().css("width");//返回CSS值
$().height();//返回CSS值,也可以加参数并赋值 //offset():获取元素距离窗口的偏移位
$().offset().left;
$().offset({
left: 10
}); //position():获取元素距离定位元素(parent元素)的偏移位,但没有设置功能因为没必要
$().position().left; //scrollTop():
//Tip:当文本超出文本框时，用overflow:auto;来设置出滚动条
$().scrollTop(); //获取第一段相对滚动条顶部的偏移
$().scrollTop(300); //设置滚动条的偏移量
$("html").scrollTop()+$("body").scrollTop();//直接获取网页的滚动偏移量
$("html,body").scrollTop(300); //设置网页的滚动条的滚动偏移量
$(window).scroll(function(){ //监听当前页面的滚动条
var offset = $("html,body").scrollTop();//返回竖直滚动条的距顶像素数
}); </script>
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<script>
//两种绑定事件的方式，相同的事件之间不会覆盖
//1:编码效率较高,但部分jQuery没有实现对应的事件，得用第二种
$("button").click(function(){
//do
}); //2
$("button").on("click", function(){
//do
}); //移除事件:
$("button").off();//带参就逐个移除，不传就全部移除 //事件冒泡: 从子元素绑定的事件默认传递给parent元素
$("son").click(function(){
//do
return false;//阻止事件冒泡,或者:event.stopPropagation()
});
//默认行为:比如<a>标签，点击之后会默认跳转，但并没有绑定任何事件,或者input自动的submit行为
$("a").click(function(){
return false;//阻止默认的行为event.preventDefault()
}); //事件的自动触发
$("son").trigger("click"); //既会触发事件冒泡,也会触发默认行为
$("son").triggerHandler("click");//不会触发事件冒泡,不会触发默认行为
$("input[type='submit']").click(function(){ });
//面试题
$("span").trigger(function(){//若想用trigger触发<a>的绑定事件和默认行为，一定要在<a>内包上<span>并对<span>进行触发器绑定
//do
}); //自定义事件
$().on("myClick", function(){
//do
});
$().trigger("myClick"); //事件命名空间
//面试题
//利用trigger触发子元素带命名空间的事件，那么父元素带相同命名空间的事件也会触发(事件冒泡)，而没有命名空间的事件不会触发
$("son").trigger("click.ls");
//利用trigger触发子元素不带命名空间的事件,子父元素中所有相关的元素都会触发
$("son").trigger("click"); //事件委托
$("ul>li").click(function(){//jQuery若找到多个元素，则事件的绑定是顺序赋予的,加载完后新增的<li>无法拥有事件绑定,此写法就不适用了
alert($(this).html());
});
$("ul").delegate("li", "click", function(){//将事件绑定的工作委托li的父元素ul,使ul加载完毕后监听并执行
alert($(this).html());
}) </script>
接下来是自己用bootstrap+jQuery做的登陆弹窗
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
html.body{
width: 100%;
height:100%;
}
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
#login{
width: 500px;
height: 400px;
margin: 100px auto;
padding: 40px;
padding-top: 0px;
background: rgb(255, 255, 255);
}
#closeBtn{
float: right;
font-size: 24px;
}
</style>
<script>
$(function(){
$("#register").click(function(){
var inputCode = '<div class="mask">'+
'<div class="panel panel-default" id="login">'+
'<div class="page-header">'+
'<h2>开始注册！'+
'<button id="closeBtn" type="button" class="btn btn-default" aria-label="Left Align">'+
'<span class="glyphicon glyphicon-off" aria-hidden="true"></span>'+
'</button>'+
'</h2>'+
'</div>'+
'<div id="form1">'+
'<form>'+
'<div class="form-group">'+
'<label for="Username">Username:</label>'+
'<input type="Username" class="form-control" id="Username1" placeholder="用户名">'+
'</div>'+
'<div class="form-group">'+
'<label for="Password">Password:</label>'+
'<input type="Password" class="form-control" id="Password1" placeholder="密码">'+
'</div>'+
'<button type="submit" class="btn btn-default">立即注册！</button>'+
'</form>'+
'</div>'+
'</div>'+
'</div>';
$("body").prepend(inputCode);
$("body").delegate("#closeBtn", "click", function(){ //将关闭按钮的点击事件委托给已经加载的body元素
$(".mask").remove();
});
/* $("#closeBtn").click(function(){ //正常方式
$(".mask").remove();
}); */
});
});
</script>
<body>
<div id="pageContent">
<a href="#" id="register">点我注册</a>
<h1>Page Content...</h1>
</div>
</body>
<script>
//鼠标移入移出事件:子元素的事件也会出发父元素的
$().mouseover(function(){
//do
});
$().mouseout(function(){
//do
});
//不会发生事件冒泡
$().mouseenter(function(){
//do
});
$().mouseleave(function(){
//do
});
//hover()封装了mouseenter()和mouseleave()
$().hover(function(){
//移入时:
},function(){
//移出时:
});
</script>
<script>
//效果
$().show(1000, function(){
//动画执行完毕后调用
});
$().hide(1000, function(){
//动画执行完毕后调用
});
$().toggle(1000, function(){
//显示/隐藏
}); $().slideDown(1000, function(){
//1秒完成向下滑动
});
$().slideUp(1000, function(){
//1秒完成向上滑动
});
$().slideToggle(1000, function(){
//1秒完成反向滑动
}); //淡入淡出
$().fadeOut(1000, function(){
//do
});
$().fadeIn(1000, function(){
//do
});
$().fadeToggle(1000, function(){
//do
});
$().fadeTo(1000, 0.5 ,function(){
//do
}); $().stop().slideDown(1000).fadeOut(1000).fadeIn(1000);//动画的执行存在队列，一个执行完了才能开始下一个,并在动画开始之前调用stop增加健壮性 $().animate({ //第一个参数内的所有属性会自动附加动画效果
width: "+=100" //在原来的基础上累加100
//width: "toggle" 宽度的有无的切换
//width: "hide" 宽度隐藏
}, 1000, "linear", function(){ //第三个参数:动画节奏
//do
}).delay(2000);
$().stop(false, false);//立即停止当前动画并开始后续动画
$().stop(true);//立即停止和后续所有动画
$().stop(false, true);//立即完成当前动画并继续多有后续的动画
$().stop(true, true);//立即完成当前的，并停止后续动画 $().fadeTo(100, 1);//去除蒙版
$().fadeTo(100, 0.5);//添加蒙版 //关于深复制与浅复制
$().clone(false);//浅复制:不会复制元素的事件
$().clone(true);//深复制:会复制元素的事件 </script>
下面是自己做的一个静态的菜单分级的Demo，带了点动画效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>jQuery</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- <link rel="stylesheet" type="text/css" href="bootstrap.min.css"> -->
<script src="jquery-2.1.3.js"></script>
<script src="bootstrap.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.nav{
list-style: none;
width: 300px;
margin: 100px auto;
}
li{
border: 1px solid #000;
line-height: 35px; /* 设置元素占高 */
border-bottom: none;
text-indent: 2em; /* 元素内文字前空两个字符 */
}
.nav>li:last-child{
border-bottom: 1px solid #000;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; /* 给最后一个<li>子元素添加左右圆角 */
}
.nav>li:first-child{
border-top-left-radius: 5px;
border-top-right-radius: 5px; /* 给第一个<li>子元素添加左右圆角 */
}
.nav>li>span{
top: 5px;
float: right;
font-size: 24px;
}
.g2>li{
background: darkorchid;
list-style: none;
border-bottom: 1px solid white;
}
#arrow{
transform: rotate(90dep);
}
</style>
<script>
$(function(){
$(".g2").hide();
$(".g1").click(function(){
/* var content = '<li class="g2">二级菜单</li>'+
'<li class="g2">二级菜单</li>'+
'<li class="g2">二级菜单</li>'+
'<li class="g2">二级菜单</li>';
if($(this).attr("active") == "true"){
$(this).removeAttr("active");
$(".g2").remove(); }else{
$(this).after(content);
$(this).attr("active", "true");
} */
$(this).attr("id", "arrow");
$(this).siblings().children(".g2").slideUp(1000);
$(this).siblings().children(".g2").removeAttr("id");
$(this).children(".g2").slideDown(1000); });
$("body").delegate(".g2>li", "mouseenter", function(){
$(this).css("background", "darkred");
})
$("body").delegate(".g2>li", "mouseleave", function(){
$(this).css("background", "darkorchid");
}) });
</script>
</head> <body>
<ul class="nav">
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
<li class="g1">一级菜单<span class="glyphicon glyphicon-option-vertical"></span>
<ul class="g2">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
