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>
<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>
jQuery知识点小结的更多相关文章
- C++重要知识点小结---3
C++重要知识点小结---1:http://www.cnblogs.com/heyonggang/p/3246631.html C++重要知识点小结---2:http://www.cnblogs.co ...
- C++重要知识点小结---2
C++重要知识点小结--1 :http://www.cnblogs.com/heyonggang/p/3246631.html 1.C++允许程序员声明一个不能有实例对象的类,这样的类惟一的用途是被继 ...
- React及Nextjs相关知识点小结
React及Nextjs知识点小结 函数式组件和类组件区别是什么 1.函数式组件是用于创建无状态的组件,组件不会被实例化,无法访问this中的对象,无法访问生命周期方法,是无副作用的,相比于类组件函数 ...
- 【SpringBoot MQ 系列】RabbitMq 核心知识点小结
[MQ 系列]RabbitMq 核心知识点小结 以下内容,部分取材于官方教程,部分来源网络博主的分享,如有兴趣了解更多详细的知识点,可以在本文最后的文章列表中获取原地址 RabbitMQ 是一个基于 ...
- SpringBoot 系列教程之事务隔离级别知识点小结
SpringBoot 系列教程之事务隔离级别知识点小结 上一篇博文介绍了声明式事务@Transactional的简单使用姿势,最文章的最后给出了这个注解的多个属性,本文将着重放在事务隔离级别的知识点上 ...
- disruptor笔记之四:事件消费知识点小结
欢迎访问我的GitHub https://github.com/zq2599/blog_demos 内容:所有原创文章分类汇总及配套源码,涉及Java.Docker.Kubernetes.DevOPS ...
- Jquery Mobile 小结
第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...
- jQuery知识点总结(第二天)
今天继续从我的笔记上面搬运.我们不产生知识,只是知识的搬运工. 内容过滤选择器: ○ 内容选择过滤器 $("div ...
- jQuery知识点总结(第一天)
整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...
随机推荐
- 【Lintcode】096.Partition List
题目: Given a linked list and a value x, partition it such that all nodes less than x come before node ...
- Redis 客户端安装与远程连接图解
Linux环境:Centos 6.8 Redis服务端版本:3.2.6 Redis客户端下载链接:https://redisdesktop.com/download 省略Linux系统安装Redis教 ...
- bzoj 1657 [Usaco2006 Mar]Mooo 奶牛的歌声——单调栈水题
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1657 #include<iostream> #include<cstdio ...
- python json ajax django四星聚会
什么是json: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programm ...
- python基础知识-数字
数字分为: 整数(int) 长整型(long) 浮点型(float) 一,整数 整数(int):即不带小数点的数字,如 12 ,45 ,0 ,3 #!/usr/bin/env python class ...
- CAS单点登录学习(一):服务端搭建
下载先在网上下载cas-server-3.5.2,将里面的cas-server-webapp-3.5.2.war放到tomcat的webapps目录下. https设置cas单点登默认使用的是http ...
- 数组,for语句(补10.11)
1.数组定义:一系列通数据类型的数据集合. 2.数组赋值的两种方法: 先定义后赋值:(赋值从0开始) var aa = new Arrey(); aa[0] = 1; aa[1] = 2; 定义并赋值 ...
- LayUI 子父窗体的交互
---恢复内容开始--- 收到的工作是将一个ERP的窗体程序改为网页实现,所以就肯定需要弹框来选择(如:物料编码.部门.业务员等等) 本文采取的前段框架是LayUI. layUI的官网API网址:ht ...
- JavaScript中两个数组的拼接
方法一:使用for循环 var arr = ['tom', 'jerry']; var arr2 = [1, 2]; for(var i=0; i<arr2.length; i++){ arr. ...
- Untiy ShaderLab 随手记录
最基本形式 (先不考虑Fog) Shader "Nafio/TUnlit"{ Properties { _MainTex("TT",2D) = "wh ...