大家好，我是唯芸星，这是我的一点点学过的知识，呈现给大家

1：正则表达式

包括：

1：正则表达式包括两部分
①：定义正则表达式的规则
②：正则表达式的规模（i/g/m）

2：声明正则表达式：

①：字面量声明： var reg =/表达式规则/表达式模式；
eg : var reg=/white/g;

②：使用new关键字： var reg = new RegExp("表达式规则","表达式模式")
eg: var reg= new RegExp("white","g")

3 、正则表达式的常用模式：

①：g：全局匹配。不加g默认为非全局匹配，只匹配第一个符合要求的字符串；

www".replace(/w/,"#");->#ww

 "www".replace(/w/g,"#");->###

i:忽略大小写；不加i默认要求大小写也匹配

            var str= "wWw";

            var newStr=str.replace(/w/gi,"#")  结果是     所有的w都会变回#，不管大小写

            console.log(newStr)

③：m:多行匹配模式，不带m则一个字符串，只有一个开头一个结尾，带m后，如果字符串分为多行
则每行都有一个开头，一个结尾，

`abc

abc`.replace(/^a/gm,"#")->`#bc

                         #bc`

[Tips:如何写多行字符串？]

普通字符串中，插入\n表示换行，"abc\nabc"
ES6中，允许使用反引号`包裹字符串，反引号包裹的字符串中，会保留空格与回车

正则表达式的的常用方法：

4 test():检测一个字符串，是否符合正则表达式的验证，返回true或false；

举个最简单的栗子：eg: /white/.test("whitewhite");->true

这是一个正确的正则表达式，返回的是true

②：exec:检测一个字符串是否符合正则表达式的验证，如果验证成功，返回结果数组：如果验证失败，返回NULL
结果数组中：
index属性：表示从字符串的第几个字符，开始符合正则要求
input属性：返回完整的被检测的字符串
下标第0个：表示符合整个正则表达式的那部分字符串，
下标的第一个到第n个：表示符合正则的第一个到第n个子表达式的部分，子表达式，就是正则中的（），也就是正则中
有几个（），结果数组中就有几个下标。。
/12(3)(4)5/.exec("aaa12345")
0:12345;//整个的
1:3//第一个小括号
2:4//第二个小括号
index:3//表示从第三个开始符合正则
input:"aaa12345",//完整的被检测的字符串，
length:3

JSON是数据交互中，做常用的一种数据格式。

由于各种语言的语法都不相同，在传递数据是，可以将自己语言中的数组，对象转化为JSON字符串，
传递之后，可以将JSON字符串，在解析为JSON对象

2 JSON对象的用户与JS对象基本相同，唯一的区别是：JSON中的键，必须是字符串

将JS的对像数组转化为JSON字符串

var str1 =JSON.stringify(users);
console.log(str1)

将JSON字符串转化为JSON对象

var obj=JSON.parse(str1);
console.log(obj);

jQuery*************

1.使用jQuery必须先导入jQuery.x.x.x.js文件

2. jQuery中的选择器；
$("选择器").函数()；
①：$是jQuery的缩写：即可以使用jQuery("选择器").函数()；
②：选择器：可以是任何的css支持的选择符

3. 文档就绪函数：防止文档在完全加载未完成之前，加载jQuery代码；
$(document).ready(function(){
//jQuery代码
})；
简写形式$(function(){ });

[文档就绪函数跟window.onload的区别]
1：window.onload必须等到网页中的所有内容加载完成后才会执行代码！包括图片视频等资源
而文档就绪函数只需要在网页DOM结构加载完毕后，就可以执行代码
2：window.onload只能写一个，写多个只会执行最后一个，文档就绪函数可以写多个，并且不会被覆盖

4 原生JS对象与jQuery对象：
①：使用$("")选中的是jQuery对象；只能调用jQuery的函数，而不能使用元素JS的事件与函数
$("#p").click(); √
$("#p").onclick=function(){} ×
解释：$("#p")是jQuery对象，.onclick是原生JS事件

同理：使用document.getElement系列获取的是原生JS对象，也不是使用jQuery相关函数。

 $(document).ready(function(){

        alert();

  弹窗显示alert（1）

       $(".p").click(function(){

            alert("你好啊");

       })

 点击事件，点击class选择器里面的p，（也就是第二个p） ，会出现弹窗效果

        })

简单举个栗子：在<body></body>里面简单的做三个p标签！！

         <body>

        <p>这是一个P标签</p>

        <p class="p">这是一个P标签</p>

        <p>这是一个P标签</p>

    </body>

②：原生js对象转化JQ对象，
可以使用$（）包裹原生JS对象，转化为JQ对象
var p =document.getElementByTagName("p")
$("p").click(); √ 原生JS的对象p已转化为JQ对象

③：JQ对象转为原生JS对象，使用.get(index)或[index]
$("#p").[0].onclick=function(){}
$("#p").get(0).onclick=function(){}

5 JQuery 解决多库冲突
由于其他的JS库，也可能使用$作为自身标识，导致其他JS库与JQ冲突；
要解决冲突，可以放弃使用$ ；直接使用jQ对象
【使用自执行函数传入JQ对象的简单写法】
jQuery.noConflict();//调用这个函数，将$控制权让渡给其他类库，即JQ不能再用$
！function(j){
函数之中，就可以用字母j，代替jQuery对象
}(JQuery);

!function(j){

             j(function(){

                 alert("解决多库冲突");

             });

         }(jQuery);

使用$()直接创建一个标签节点：在<body></body>里面做几个p标签。取个id跟class，，设置样式，这里就不多说了！！

*******$(function(){}）：任何的jQuery都要写在里面才能生效，切记

.append()属性：内部插入，，，例如在#div1内部的最后，直接插入一个节点。

.appendTo（）：把新节点插入到#div1中

eg:$("<p>这是被插入的p标签</p>").appendTo("#div1");

.prepend（）：在#div1内部的开头，直接插入一个节点。

eg:$("#div1").prepend("<p>这是被插入的p标签</p>");

.after（）：在#div1的外部插入

$("#div1").after("<p>这是被插入的p标签</p>");

.insertBefore（）：在div1的外部头顶插入

把每个p标签外面，都包裹一层div

$("p").wrap("<div></div>");

把所有的p标签，包裹在同一个div中
$("p").wrapAll("<div></div>");

把#div1里面的所有子元素，用<div>包裹起来
$("#div1").wrapInner("<div></div>");

.replaceWith（）：将所有匹配的p标签，全部换为span标签

用span元素，替换掉所有p标签
$("<span>111</span>").replaceAll("p");

empty();：删除#div1中的所有子元素。但是#div1依然保留空标签

$("#div1").empty();

里面的内容被删除

.remove();直接从DOM中，删除#div1以及所有子元素

$("#div1").remove();

.detach();直接从DOM中，删除#div1以及所有子元素

$("#div1").detach();

1、相同点：
① 都会把当前标签，以及当前标签的所有子节点，全部删除；
② 都可以在删除时，把当前节点返回。并可以使用变量接受返回的节点，以便后期恢复；

2、不同点：
使用接受的节点，恢复原节点时。
remove只能恢复节点的内容，但是事件绑定，不能再恢复；
detach不但恢复节点的内容，还能再恢复事件的绑定；

$("#div1").click(function(){

                alert();

            })

            var div1 = null;

            $("button:eq(0)").click(function(){

                 div1=$("#div1").remove();

            })

            $("button:eq(1)").click(function(){

                 div1= $("#div1").detach();

            })

            $("button:eq(2)").click(function(){

                $("button:eq(2)").after(div1);

            });

[JS中.cloneNode() 和 JQ中 .clone()区别]
两者都接受传入true/false的参数。

.cloneNode() 不传参数或传入参数false，表示只克隆当前节点，而不克隆子节点。传入true表示可隆全部子节点。

.clone() 无论传入哪个参数，都会克隆所有子节点。但是，不传参数或者传入false，表示只克隆节点，不克隆节点绑定的事件。传入true表示同时克隆及诶单绑定的事件。

$("#div1").clone(true).empty().insertBefore("button:eq(0)");

************************************************************************************************ CSS和属性相关操作 ****************************************************************

使用attr()设置或者取到元素的某个属性：

$("#div1").attr("class","cls1");

$("#div1").attr({ //使用attr一次性设置多个属性
"class" : "cls1",
"name" : "name1",
"style" : "color:red;"
});
console.log($(".p").attr("id"));

删除元素属性
$("#div1").removeAttr("class");

prop与Attr区别。
对于checked/disabled等属性名等于属性值的属性，使用prop返回的将是true或false，使用attr返回的将是属性名或者undefined

所以，对于属性名等于属性值，或者属性是true/false的特殊属性，通常使用prop选取。其他的属性，通常使用attr选取。

.html() 取到或设置元素里面的html，相当于innerHTML

$("#div1").html("<h1>我是新的h1</h1>");

.text()：取到或设置元素里面的文字内容，相当于innerText

$("#div1").text("<h1>我是新的h1</h1>");

获取或设置元素的Value值

$("input[type='text']").val("姜浩特别帅！");

给元素设置CSS样式属性属于style行级样式表权限：

$("#div1").css({

                "color":"red",

                "user-select":"none",

                "text-stroke":"0.5px blue"

            });

获取和设置元素的width和height属性：

#div1{

width: 200px;

height: 200px;

background-color: red;

padding: 30px;

border: 10px solid yellow;

margin: relative;

margin:10px;

}

console.log($("#div1").height());

console.log($("#div1").width());

获取元素的内部宽度。包括宽高和padding

console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

获取元素的外部宽高。包括宽高+padding+border
传入参数为true时，还要包括margin

console.log($("#div1").outerHeight(true));
console.log($("#div1").outerWidth());

offset():
获取元素，相对于浏览器窗口左上角的偏移位置。
这个位置，包括margin/position等。
返回的是一个对象，包含两个属性，分别是left和top

position():

获取定位元素，相对于父元素的偏移位置(父元素必须是定位元素)。
这个位置，只包括top/left等定位属性。而margin将被视为当前元素的一部分，并不会视为偏移量范畴。

如果父元素有定位属性。则相对于父元素padding左上角定位；
如果父元素没有定位属性，则与offerSet一样，相对于浏览器左上角定位（但是，只是两者的定位原点都在浏览器左上角。在计算偏移量时，offerSet会计算margin和top. 而position只计算top）。

*绑定，动画事件***********

[绑定事件的方式]
1 事件绑定的快捷方式，
缺点：绑定的事件无法取消。

$(function(){}) jQuery都需要写在这里面

2 使用on()绑定事件
①：使用on进行当事件绑定

<body><button>按钮</button></body>

$(fu

$("button:eq(0)").on("click",function(){

            alert()

            });nction(){

})  ,点击按钮弹出对话框

使用On:一次性给同一节点，添加多个事件
多个事件间空格分割

onmouseover 鼠标移到上去
dblclick双击

$("button:eq(0)").on("click onmouseover dblclick",function(){

                console.log("触发了事件");

            });

点击按钮触发事件，单机一次，双击两次

③：使用on：一次性给同一节点添加多个事件，分别执行不同函数

$("button:eq(0)").on({

                "click":function(){

                    console.log("执行了click事件");

            },

            "mouseover":function(){

                console.log("执行了mouseover事件");

                }

            })

鼠标移上去执行onmouseover

点击执行click事件

④：调用函数的时候，同时给函数传入制定参数

$("button:eq(0)").on("click",{name:jredu,age:14},function(evn){
console.log(evn)
console.log(evn.data.name);
console.log(evn.data.age);
})

使用on:事件委派
将原来需要绑定在本元素上的事件，改为绑定到祖先节点乃至根节点上，然后委派给当前节点生效：
eg:$("p").on("click",function(){})
↓(事件委派)
$(document).on("click","p",function(){})

作用：不使用事件委派的绑定方式，只能绑定到页面的初始化时候的标签上，当页面所赠同类型的标签
这些新增的标签，不能绑定上事件
但如果使用事件委派，当页面新增同类的标签时候，这些新增的标签也能够绑定

    $("button:eq(0)").on("click",function(){

                $(this).after("<p>这是p111111标签</p>")

                $("p").on("click",function(){

                alert("没有委派")    ;

            })

            //第二个函数为委派

           $(document).on("click","p",function(){

               alert("委派");

           })

off()取消on事件绑定
$("p").off("click"):取消单时间绑定；
$("p").off("click",mouseover dblclick):取消多事件绑定
$(doucment).off("click","p");取消事件委派绑定
$("p").off();取消所有的事件绑定

举个简单的栗子

    $("button:eq(0)").on("click",function(){

            alert()

            });

      $("button:eq(0)").off("click")
button的点击事件被取消了！！点击按钮不会在弹出框架

使用one绑定的事件；只能执行一次

trigger():自动触发某元素的事件

第一个参数：是需要触发的事件的类型，
第一个参数：（可选）数组格式，表示传递给对应的事件函数的参数，
传递进来的参数，可以再事件函数中，定义形参获取（形参第一个必须是event事件，从第二个开始为传递的参数）
也可以直接在函数中，使用arguements对象数组，读取参数

.triggerHandler():功能同上，区别如下
①：triggerHandler不能触发浏览器默认的HTML事件，如submit等....
而trigger可以触发任何的事件
②：trigger:可以触发页面中的所有匹配元素的事件；
而triggerHandler只能触发那一个匹配元素的事件
③：trigger的返回值，返回的是调用当前函数的对象，符合jQuery的可链式语法：
而triggerHandler返回的是事件函数的返回值，如果事件函数没有返回值，则返回undefined

$("p").on("click",function(evn,n1,n2){

            for(var i=;i<arguments.length;i++){

                console.log(arguments[i]);

            }

            //return 1

            alert("这是p标签的click事件,能传递了参数"+n1+"和"+n2)

        });

       $("p").trigger("click",["jredu",,,,,]);

        setTimeout(function(){

            alert("截止")

        },)

***************************** JQuery动画 **************

show让隐藏的元素显示，效果为：同时修改元素的宽度，高度.opacity属性
①：不传参：直接显示，不进行动画；
②：参数时间毫秒数，表示多少毫秒内完成函数
③：传入（时间，函数）表示动画完成之后，执行回调函数；

$("#p").show(,function(){

            alert("动画完成了！")

            $("#p").hide()

        });

.slideDown()让隐藏的元素显示，效果为从上往下，增加高度
.slideUp()让显示的元素隐藏，效果为从下往上，减少高度

setInterval (function(){

        $("#p").slideUp(,function(){

            $("#p").slideDown();

        })

        },)

自己做个定时器

就不停的上下减少高度了

$("#p").fadeOut(,function(){

            $("#p").fadeIn();

        })

淡出淡入，若隐若现

.fadeToggle():让显示的元素隐藏，让隐藏的元素显示；

.fadeTo(时间，最终透明度，函数)：同fadeToggle，接受第二个参数，表示最终达到的透明度

        $("#p").fadeToggle(,function(){

       alert("完成");

        });

        $("#p").fadeTo(, 0.5, function(){

        alert("完成");

        });

代码写法相同，作用相同，只是透明度不同

animate({最终的样式属性，键值对对象},动画时间，动画效果（"linear","swing"）,
动画执行完成后的回调函数)
①：参数一对象中，键必须使用驼峰法则，{fontSize:"18px"}
②：只有数值类型的属性能够使用动画，非数值的属性不能使用动画

        $("#p").animate({

            width:"300px",

            opacity:"",

        },,"linear",function(){

            alert("动画完成");

        });

jQuery的基础跟JS的正则的更多相关文章

js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些一.总结一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
jQuery与JS的区别，以及jQuery的基础语法
*在使用jQuery时,要在页面最上端加上 <script src="../jquery-1.11.2.min.js"></script> 看一下js与jQ ...
JQuery一些基础笔记
JQuery学完了,总结一下一些需要掌握的知识点.首先什么是JQuery 说白了就是有JavaScript衍生出来的一个产物,它呢兼容各种浏览器,但是前提你要用这个JQ的话首先呢你就要引入JQ库.学过 ...
jQuery官方基础教程笔记(转载)
本文转载于阮一峰的博文,内容基础,结构清晰,是jquery入门不可多得的资料,非常好,赞一个. 阮一峰:jQuery官方基础教程笔记 jQuery是目前使用最广泛的javascript函数库. 据统计 ...
html5文章 -- 使用 jQuery Mobile 与 HTML5 开发 Web App —— jQuery Mobile 基础
这篇文章是使用 jQuery Mobile 与 HTML5 开发 Web App 系列的第二篇,在本文以及接下来的数篇文章 Kayo 将会介绍 jQuery Mobile 的组件.事件响应以及可以调用 ...
前端总结·基础篇·JS（一）五大数据类型之字符串（String）
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(二)补充前端总结·基础篇·JS(一)五大数据类型之字符串(String) 目录这是& ...
前端总结·基础篇·JS（四）异步请求及跨域方案
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
新知识：JQuery语法基础与操作
jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write ...
jQuery之基础核心（demo)
jQuery之基础核心作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...

随机推荐

jsp变量的使用规则
jsp是一种弱类型的交而不能语音,虽然看似没有像强类型语言那么多的代码规范,但是在实际使用的过程当中依然有不少的问题.下面就简单的梳理一下. 1.首先,jsp是一种弱类型的脚本语言,变量在使用之前无需 ...
git 安装和基本操作
林纳斯的小故事感兴趣的同学可以自己百度一下版本控制常用svn git @@@svn 1 搭建环境 server:visualSVN Serverserver port: https 默认443ht ...
mbos之动态图表设计
前言所谓,一图胜千言.人脑有80%的部分专门用于视觉处理.而随着数据时代的全面来临,我们自然有必要将数据转化为图形与图表. Mbos是一个快速,稳定的云端轻应用开发平台.帮助企业快速开发移动应用,加 ...
FastDFS安装和配置，整合Nginx-1.13.3
目录: 一:下载FastDFS 二:安装FastDFS 三:配置四:整合Nginx和FastDFS FastDFS is an open source high performance distr ...
初探IAT
---恢复内容开始--- IAT(Import Address Table:输入函数地址表) [IAT作用是什么:] 一个API函数,比如MessageBoxA,我们是如何调用它的呢, 在这里我们可以 ...
【MySQL源码】源码安装和启动mysql
--[MySQL源码]源码安装和启动mysql --------------------------------------2014/08/19 本机环境:ubuntu12.04,fedora-17 ...
关于java中用itext导出word的一点想法
这几天在项目组只做了很少的事情,主要还是自己不认真地说.我的部分是要负责用itext导出word文档这一块,之前看到大佬们做出了EXCEL部分觉得很是惊奇,就像刚刚接触HTML一样的感觉.但是毕竟自己 ...
MySQL数据库—日期与时间函数
一. 日期和时间函数函数的概念:按指定格式输入参数,返回正确结果的运算单元 1. 返回当前日期:curdate() current_date() current_date()+0可以将当前日期转换为 ...
javascript今生前世
事情得从一个chrome控制台中的无意打印说起. 众所周知,js共六种数据类型,string.number.undefined.boolean.object.null.当然javascript还准备了 ...
es6五种遍历对象属性的方法 - 表格整理
ES6 一共有5种方法可以遍历对象的属性. (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性). (2)Object.keys(obj) Obje ...

jQuery的基础跟JS的正则