选择器方法和正则表达式
//下参,表选择器例'li';'#a'
获第一个
选.get(0)或选[0]--DOM对象 选为例$("p:first")--JQuery对象 或 $("p").eq(0)--JQuery对象
DOM元素->JQuery对象$(DOM元素)
无选中选择器:
其,是空json([])数据(可用选择器个数来判断);选择器.某1.某2报错,因为选择器.某1,会为 undefined(用==null||==undefined判断);选择器.方法()例-选择器.text()返回""
注意,元素属性名不识别大写,即使大小写不对应,也能找到!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
js文件下载完当再次下载(同域名下)走的是缓存,若点刷新(此时网址是A),会清上次打开网址A时所下载的js
$(document)对象与$(window)对象的事件不会受后天插入的影响
单引可替换双引，双引里包括双引要变为单引 猜：可 var a="#li"; $(a)相当于选择器$("#li");
猜:js执行方式
猜测每一次执行js都是单线程,且js整体完成后才渲染界面(不影响js之间的逻辑),ajax是异步的(请求后台是立即请求的,success部分是等js其余地方执行渲染完才执行)
当此js代码有延迟,此时在另一块代码又有些样式想立即出来,可把此js(有延迟的)放ajax里
猜:当多个事件冲解析:事件会排队执行,此时进行滑动的动作此事件会加塞进队伍里,例滑动快些可能 mousewheel 执行多次才执行scroll!!!(mousewheel事件会引出多个scroll事件)
猜:一个动作引发多个同类事件,这个事件完了,才执行下一个同类事件;没执行完此事件,这时又有动作不会引发同类事件产生
注意滑动滚轮一次可能导致mousewheel事件(每一刻度执行一次)多次;解决:根据window.event.wheelDelta返回值
事件里有慢执行语句重叠问题优化可参考Javescript\示例代码\滚动事件
js引入方式
详见JSP.HTML.CSS\Javescript\函数，选择器,变量,对象\js导入加载方式
发现
展开某变量 其下有[[Scope]] 详见 JSP.HTML.CSS\Javescript\函数，选择器,变量,对象\全局变量函数的使用
异常处理可
try{}catch(e){}
A
选.after("xx");//同html(),但不覆盖,在被选中元素后插入//insertAfter方法同此具体使用笔记本
选.attr("属性名");//获取元素属性值返回string类型; //JQuery对象获取
同document.getElementsByTagName("id")[0].getAttribute("属性名(此是单引还是双引)");//DOM对象获取
//选择器多个;第一个的属性值是aa,第二个的属性值是bb;返回"aabb"
判断元素是否拥有此属性
if(typeof($("#aid").attr("rel"))=="undefined")
选.attr("属性"(全小写规范),"属性内容");在标签中添加属性(添加id元素用他吧) 同 document.getElementById('ID').属性="属性内容"; 元素里无属性它会创一个此属性
$("img").attr({width:"50",height:"80"});//多个时
例多选按钮的选中状态的获取及赋,见文件"CSS属性,样式(100行处)"
把例["a","b"]['a','b']json数据用attr赋进去,当提取属性值时是字符串例判断用=='a,b';{}类型的json数据判断用=='[object Object]',所以
存json数据放属性里可先把json转为字符串再存
选.attr({css样式});//给当前获取元素插入属性并规定样式
选.animate(styles,speed,easing,callback)
改变 "div" 元素的高度： $(".btn1").click(function(){ $("#box").animate({height:"300px"});});//#box换为html,body；height换为scrollTop，是什么效果？
选.addClass("xx ss")//向被选元素添加一个或多个类;
若向被选元素添加多个类;例选.addClass("a b");若为例("a a");实际只会加一个class值->a
语法：$("p").addClass(function(index,oldclass){});index参与到函数中,此方法会遍历p，那第一个p运行此方法index=0；以此类推
选.append("xx");//同html(),但不覆盖,在其内容后插入//appendTo方法同此具体使用笔记本(其它插入方式,此页面查找"具体使用笔记本"即可)
$("
若是 选.append(DOM对象); 例 原DOM对象所指元素会被移到到现插入地点,事件都在
B
选.before("xx");//同html(),但不覆盖,在被选中元素前插入//insertBefore方法同此具体使用笔记本
选.bind(); //已弃用,用on代替
//移除用unbind()
选.blur() //无参表触发所以选的失去焦点时事件
$("p").blur( function () { alert("Hello World!"); } );//blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
C
选.change()//当元素的值发生改变时,触发,适用于文本域|textarea|select
注意文本框需要失去焦点才触发,select元素选择某个选项时发生,'浏览并选中按钮'选中"文件"(且改变)触发
发现-用js改变赋值不触发
选.clone(参)//复制节点--例$("ul li:eq(1)").clone(参).appendTo("ul");
//参:(默认false,可为true;表是否复制元素所有的事件处理)
选.css("属性名");返回指定的 CSS 属性的值
选.css("属性名","值");设置指定的 CSS 属性;猜background-position可写为backgroundPosition
多个例
$("p").css({"background-color":"yellow","font-size":"200%"});
若代入的样式有!important需如下写
$("div.test").css("cssText", "width:650px !important;");要想修改多个属性，可如下：
$("div.test").css("cssText", "width:650px !important;overflow:hidden !important");
获取宽度最好看下,下面的 width() 方法
选.click()//不放在加载函数里报错?
//鼠标单击时触发--例点按钮,当松鼠标时也在此按钮,事件运行 //注意在现在的项目中,每次加载页面,click事件都绑定一下,会积累的(只要是点击事件)!!普通的click对后插入的代码不起作用,因此未发现;$(document).on的事件会影响得以发现,需解绑事件在页面开头//猜jsp方式绑定事件不会事件叠加
若绑定了mouseup;mousedown;click;click执行,mouseup与mousedown也会执行
外边距不响应此事件,猜其余如内边距线响应
选.dblclick;双击事件;若同时绑定了几个类似的事件该执行的都会执行
D
选.detach();//删除节点,但其事件,附加还在//类似remove()
选.data("ge", "Hello World");//给其赋名为ge的数据；获：选.data("ge");
//若赋的是，带有名称/值对的对象
// testObj=new Object();
testObj.greetingMorn="Good Morning!";
testObj.greetingEve="Good Evening!";
//赋：选.data(testObj)；
//获：选.data("greetingEve")
//获全部：选.data();该方法将以对象的形式从元素中返回所有存储的数据。
//可用于获取data-*的值,详见文件date自定义属性
E
选.each(function(index,element){});//即 选 有几个这个方法运行几次
//idex - 选择器的 index 位置,从0开始
//element - 当前的元素（也可使用this,用时就相当于this---$(element).siblings("input").val();）
//例:
//$("button").click(function(){
//$("li").each(function(){
// alert($(this).text())
//});
//});
//element==选[index];//相等;即element DOM对象$(element)会转为JQ对象
//each不能使用break和continue,代替方式如下
//break----用return false;
//continue --用return true;
选.empty()//删除节点文本;若$("p").empty();
112211
;22还在吗?其它删除方法 detach remove replaceWith
F
选.focus()//触发 focus 事件,即"选"获取焦点;例$("input").focus();
使人无法使用文本框:
jQuery 代码:
$("input[type=text]").focus(function(){
this.blur();
});
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
G
H
选.hasClass("xx")//是否有class值为xx返回true、false
选.height()//获取高,不包括外内边距,线宽;最好看一下width()的使用
选.hover()//鼠标悬停时方法
选.hover(x1,x2)//当鼠标移入x1,或移出x2时触发
选.html("xx");//插入时html语句会执行,会覆盖//没参表获取被选中的HTML内容(包括元素及文本)
I
选.index()
没参时,表:选.get(0),相对于它的同辈元素下标值
参为例$("#n7"), document.getElementById("n6")
表参所选中元素在相对于"选"的下标值
参为例选择器字符串"span" "#n4"等;例$("#n8").index( "span" ) );
表$("#n8").get(0)所对应的元素;在$("span")的下标值
注意要活用 this
J
K
选.keydown()//按下键盘事件,例
$(window).bind("keydown", function(e){
//e.which;获取按键编号
if(e.keyCode == 13) {//回车是13号
方法();
}
});猜同$(window).keydown(function(e){if(e.keyCode == 13){}});
$("input").keydown(function(){//当在input元素(即输出框内要有光标,框要有焦点!)按下按键时，改变文本域的颜色;若为div,给他加获取焦点呢?
$("input").css("background-color","#FFFFCC");
});
选.keyup()//松开按下键盘事件
L
选.load(url,data,function(response,status,xhr));
//类似于插入(会覆盖)会运行js,html,又类似于
选.length //获取元素的个数,以1为开始
//选.size()和上获取的值是一样的，但是如果是获取字符串的长度就只得用length, 如 选.val().length；
选.live(event,[data],function)//--移除用die()
//可对尚未创建的元素添加事件处理器。
推荐用on例
$(document).on('click', '#list li', function() {
//function code here.
});
M
选.map()用于处理当前jQuery对象匹配的所有元素，并将处理结果封装为新的数组
例http://www.365mini.com/page/jquery-map.htm
选.mouseover()//鼠标指针移动到元素,还是子元素,其内的元素都会触发
选.mouseout()//鼠标离开被选元素,还是子或子子元素,都会触发
选.mouseenter()//鼠标指针移到到元素时--子元素触发不了
选.mouseleave()//鼠标指针离开此元素时触发--子元素触发不了
选.mousedown()//当元素上按下鼠标按钮时触发;在click(按下与松开都是同一元素时执行)前执行;mousedown与mouseup联用是不是好于与click联用
选.mouseup()//当在元素上释放鼠标按钮时触发
选.mousewheel();//鼠标滚轮正在被滚动时运行;滚轮滑动一刻度!!!执行一次,但其对拖动滚动条不响应;和其类似的是scroll事件
//滑动一刻度(会滚动条滚动100px(注意scroll事件第三个注释会影响此值),执行(次数不等的)scroll事件);获取滚去的高度$(this).scrollTop();//获取的是滚动前,滚去的高度,而不是滚动后的
//多个mousewheel执行会运行n个scroll,最后一个scroll所获取已滑动距离为没滚轮时的距离+n乘100px
谷歌
$(window).on("mousewheel",function(event){//谷歌鼠标滚动事件 });//绑定事件
//获取是下还是上滚window.event.wheelDelta(下返回-120,上返回120)(event是属性名不是参名);
火狐
document.addEventListener('DOMMouseScroll',函数名,false);//绑定事件
function 函数名(event){ console.log(event.detail);//下是3上是-3 }
结合两者
var state="X";//判断是上还是下
if(window.event){
var wheelDelta=window.event.wheelDelta;
if(wheelDelta>0){
state="S";
}
//console.log(window.event.wheelDelta);
if(wheelDelta>120||wheelDelta<-120){
//console.log("清除");猜当一个滚轮动作滑动多个刻度,返回值分别为120,和他的倍数,使一个动作执行一个事件
event.preventDefault();//猜,把此动作也会响应的其它事件去掉如scroll事件
return;
}
}else if(event.detail){
if(event.detail<0){
state="S";
}
}
$(document).mousemove(function(e){//鼠标移动时触发
$("span").text(e.pageX + ", " + e.pageY);//获取鼠标所在坐标
});
N
O
选.on("events",[selector],[data],fn)---猜-移除用off()
//给"选"绑定事件//events:多个用空格分隔事件名称或命名空间;--事件要被""
//selector:选择器(如果没有就不会有限制,有则表哪些"选"的后代元素触发even才会执行fn);
//data:规定传递到该函数的额外数据;[data],fn例data,function(eva){//data为json格式的值{x:i},此时可eva.data.x得到i}
//fn:事件响应所运行函数
//普通选择器对后插入的代码无法绑定事件,选择器为$(document)才行,注意selector值有,例:li是后天插入的,li也会绑定事件
//$(".pageTest").off("click","li");$(".pageTest").off("click",".prv");//绑定时就是一个个绑定,解绑没法一口气,除非$(".pageTest").off("click");
//例$(".demonstrate").on("mouseover mouseout","ul li",function(e){ if(e.type=="mouseover"){}else{}}
//多事件多函数$(".demonstrate").on({mouseover:function(){},mouseout:function(){}},"ul li");
//命名空间的使用 //$("#haorooms").on("click",function(){});//1
//$("#haorooms").on("click.a",function(){});//2
//$("#haorooms").on("click.a.bb",function(){});//3
//触发click事件，会把123都触发了,例$("#haorooms").trigger("click");//发现若选择器为x个,会x次执行上123
//解决$("#haorooms").trigger("click!");//只1
//$("#haorooms").trigger("click.a.bb");只触发3
//给一个选择器绑定多个事件都会执行,即使命名空间相同,那么当根据空间相同删除事件,则都会删除
//如果不管用用bind()方法;优先推荐on,替代live()例
$(document).on('click.aa', '#list li', function() {
//function code here.
});
解绑用例$(document).off(".aa");//可给所有事件加aa命名空间统一解绑
绑定的事件不会运行(自定义的事件也是),系统的事件触发时响应,自定义的事件用trigger来触发
$(".view").on("click",a);//点击响应,若a改为a()第一次加载才会运行
function a(){
console.log("xx");
} 注意在现在的项目中,每次加载页面,click事件都绑定一下,会积累的,普通的绑定事件click(猜其它事件亦是如此)对后插入的代码不起作用,因此未发现;$(document).on的事件会影响得以发现,需解绑事件///猜jsp方式绑定事件不会事件叠加
若需引入变量选择器
猜可var bodyy=$("body") $(document).on('focus.bootstrapSelectFocus',bodyy.selector+" li", function() {
事件为input
对于检测 textarea, input:text, input:password 和 input:search
这几个元素通过用户界面发生的内容变化非常有用，在内容修改后立即被触发(输入法输入也会被感应触发;)
注意
通过js赋值,如用val赋值,不会触发如 change,input事件
选.offset()获得
元素当前的偏移量即外边距值
$(".btn1").click(function(){x=$("p").offset();//x.left或x.top等是返回数字的});
选.off()//解绑on()的事件例:$(".demonstrate").off('click',"ul li",eventFunc//此为函数名);
//猜若下选择器为("div .demonstrate"),$(选择器).off选中的和"div .demonstrate"是同一个元素即可
//发现:当绑定时用$(".demonstrate").on('click',"ul li" ;解绑ul li所对应元素用上,用$("ul li").off不行
//$("#haorooms").on("click.a.bb",function(){});//多个相同命名空间的点击事件是独立的,不会覆盖
//$("#haorooms").off("click.a.bb");//直接删除bb命名空间
//$("#haorooms").off(".bb"); //直接删除bb命名空间
//$("#haorooms").off(".a"); //删除.a命名空间下面所有的子空间【包括.a.bb .a.cc等等，.a是.bb的父级，因此.a下面的都会删掉】
//$("#haorooms").off("click");//直接解绑click，下面的命名空间都会删除,包括选择器.click()。
//$("#haorooms").off();//选择器下所有事件解绑
//$(document).on('click.aa', '#list li', function() {}
//解绑例$(document).off("click");live方法也会解绑;对,其它选择器.click,及,其它选择器.on,不影响
$(document).off("click.aa");//命名空间aa下的click解绑
$(document).off(".aa");//命名空间aa下的所有事件解绑(即change.aa也包括)
onresize事件会在窗口或框架被调整大小时发生
P
选.prepend("xx");//同html(),但不覆盖,在其里的内容前插入//prependTo方法同此具体使用笔记本
Q
R
选.remove([参为筛选元素的JQuery表达式]);//删除节点(包括事件,附加;猜,例其class的事件不会删,id的删);类似 detach()
选.removeAttr("属性名");//删元素属性-删id元素用他吧;多个空格隔开
选.removeClass//从被选元素移除一个或多个类 $("p:first").removeClass("intro");多个空格
选.replaceWith("Hello world!");//替换节点用HTML代码;
//若为「选」.replaceWith(『$(选择器)』);猜,表『』所选中的元素(只是元素)替换掉「」
(要事先存在元素否则$()获取不到;若不是事先存在元素可『』换为document.createElement("div"))
(某).replaceAll(选);//和replaceWith()类似,就是换了下位置,不同之处,就是某不能为函数--详细百度
S
选.scroll();//当滚动条!!!(不是鼠标滚轮)被滚动时运行
页面滚动$(window).scroll(function(){});//猜$(document).scroll(也行,$(window)浏览器支持的多)
//鼠标滚轮滑动一次执行多次,因为每次滑动(?px不固定)滚动条,就会执行一次;左右滑动滚动条也会执行
//当页面结构变化时,例增加数据在页面,渲染页面后导致滚动条滑动会执行n次scroll()事件
//mousewheel(火狐是DOMMouseScroll) 事件鼠标滚轮滑动一次执行一次,但其对拖动滚动条不响应
选.submit();//选是form的id,使提交
//表单提交触发事件,停止当前表单提交书p39(后)
选.select(function(){ //选一般为$("input"); });
//当 textarea 或文本类型的 input 元素中的文本被选择时，触发事件
//如果是DOM对象.select() 方法用于选择该元素中的文本
选.serialize() //表单序列化,值会转为URL 编码文本(哪些值会转呢,参考encodeURI方法)
//选择器可以是一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身
返回例 $('form').serialize() -> 控件name值=1&aaa=%E9%87%8C&bbb=value
T
选.text("xx");//插入-不管写的啥,都作为文本执行--会覆盖原来的//没参表获取(只获取文本内容),选多个,会获取多个
选.trigger("事件名");使选择的这个事件运行
//例$("input").select(function(){ alter(执行); });
$("button").click(function(){ $("input").trigger("select");});
或 var e = jQuery.Event("select"); $("button").click(function(){ $("input").trigger(e);});
使用事项JSP.HTML.CSS\Javescript\模拟点击
选.toggle(//1.9版本已经给删了.用if判断写吧
function(){//第一次单击时触发},
function(){//第二次单击时触发}
//第二次循环至1
)
选.toogleClass("#a")//选的id为a,同removeClass("#a"),否则为addClass("#a")效果
U
V
选.val();//获取选择器的value值--猜只对"有自带value属性的元素"有效(否则返回的是undefined);例如输入框(无内容返回的是"")
选.val(值)//可赋值--当任意元素 用val(值)赋值后,.val()是可以获取到的
//猜val(null)同val("")
//select元素看文件"HTML元素标签+属性"
W
选.width();//获取元素宽度,不包括内外边距,无选中内容返回null;选.width(200);//给元素设宽(参可为200|"200"|"20%");
获取也可用 document.getElementById("view").offsetWidth;
注意若默认隐藏元素,里子元素宽为百分比(即f12时选中此元素右侧的模型宽百分比显示),获取的也是百分比值例20%->20
若你要的宽同$(window).width()或$(document).width();(两者值是不一样的);直接通过此方式获取
获取宽度区别
console.log("宽度A为:"+$(".lor_left").width());-->182(仅是蓝色部分,number类型)
console.log("宽度B为:"+$(".lor_left").css("width"));-->192px(蓝+绿部分,注意此处有px字符串类型)
选.outerWidth() 填充+内边距+线 的宽度; 选.outerWidth(true) 填充+内边距+线+外边距 的宽度
X
Y
Z
隐藏与显示
通过改变display值实现,不会有实体体积
1. toggle|show|hide([表从隐至可见的速度],[例show执行完要执行的函数]);猜-没设速度不能设函数
速度值:数(毫秒) slow(慢0.6秒) normal(一般0.4秒) fash(快0.2秒)
例--获.show("slow");//数字不需""
--此是宽高逐渐缩小的过程(即隐藏时下至上,右至左)
2. fadeIn|fadeOut(速度值);//使用同上
--隐藏时变为 display:none ,效果是慢慢淡出
3. slideToggle|slideDown|slideUp(速度值);//使用同上
--元素从上至下延伸显示
--元素从下至上缩短,直至隐藏
hide类似 fadeOut 类似 slideDown ;从显至隐
判断是否隐藏显示:选择器.is() //注意,肉眼看不见的元素上就认为是隐藏的(依据宽高为0?)
选择器.is(":visible"); //返回true|false
选择器.is(":hidden");
样式隐藏 --会有实体体积
通过样式 opacity,使div透明
选.css("opacity","0")
异常:
例获取当前元素显隐状态,若放$(".choose_hide").toggle(800);后发现都是获取为显示状态;(用选择器.css也一样)原因--加时间后是个过程不是立即显隐
解决在选择器.toggle前获取状态就行了;或者加个自定义属性判断其值
发现:在这段800毫秒内是一个动画,可用$(".yh_emma_hidden").is(":animated")返回值判断是否在这段动画期间执行某内容(用于解决执行多次.toggle(800),会累加动画效果的问题:你都点完了,动画还在那一次又一次动呢)
数据类型的使用看文件 JSP.HTML.CSS\Javescript\函数，选择器,变量,对象\变量\数据类型
window.navigator.userAgent //判断浏览器,版本号,还可以区分是不是微信浏览器
正则表达式
字符串格式(好像能为jquery变量例$("#b").val()如果不行用书p41(后)的声明方式2)
写活包表含aq即可 /aq/
写死第一个必须为a第二个必须为q即必须是aq /^aq$/ 扩展猜/^a表第一个是a;q$/表最后一个是q 例str.replace(/(^\s+)|(\s+$)/g,"");//去除两端空格 猜为/^\s+/g /\s+$/g的结合体
注意 ^只在[]里用表非的意思!!!!
[] 里范围才需-进行关联 例 a-z;否则直接挨着写即可
例 Pattern pattern = Pattern.compile("[\\w*%().'=;]+");
值只能为数字,字母,下划线和汉字 Pattern pattern = Pattern.compile("[\\w\\u4e00-\\u9fa5]+");
发现 直接写 例编码 \u4e00 这种格式,可以直接识别使用(这样可解决web.xml中若写正则某些特殊符号报错)
第一个为0-3的数,第二个为b-d不区分大小写 /^[0-3][b-dB-D]$/
第一个为非5-8的数,第二个为一个数字|下划线|字母 /^[^5-8][A-Za-z0-9_]$/
(任意五个字母+@)*3 /^([a-zA-Z]{5}@){3}$/
重复字符 {n}//它前的那个出现n次 {n,}//至少n次,最多无限次 {n,m}//至少n次,最多m次
*相当于{0,} +相当于{1,} ?{0,1}
常用字符
\s 任何空白字符(包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v])
\S 任何非空白字符 \d 等价于[0-9] \D 等价于[^0-9]
\w 等价于[A-Za-z0-9_] \W 等价于[^A-Za-z0-9_] . 除了换行符的任意字符
中文字符 \u4e00-\u9fa5
//若需要识别32位的UTF-16 字符 ,即Unicode字符编号大于0xFFFF的字符(一般都是些偏僻字或其它符合)参考ES6
特殊符号(例\./等)用转义字符\;例replace(/\//g,"-");另java字符串里的\不被识别需写为\\才可转义
\\n匹配\n
\b 元字符
\b即单词和符号之间的边界
单词:中文字符,英文字符,数字,下划线都可看为是单词不分彼此
符号:可以是中文符号,英文符号,空格,制表符,换行
例 let name = 'abc def hig';
name =name.replace(/\b\w+\b/g, function(word){ return word.substring(0,1).toUpperCase()+word.substring(1);});//word是匹配到的值,即replace(正则,方法返回值)
返回 "Abc Def Hig"
\B和\b正相反
\p{}指定匹配的Unicode,如匹配所有的箭头字符等.详见http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/regex
例 /^\p{Number}+$/u 匹配所有数字包括罗马数字等Unicode码字符;
\P{…}是\p{…}的反向匹配，即匹配不满足条件的字符
这两种类只对 Unicode 有效，所以使用的时候一定要加上u修饰符
?! Windows (?!95|98|NT|2000)匹配 "Windows 3.1" 中的 "Windows"，但不能匹配 "Windows 2000" 中的 "Windows"
?= Windows (?=95|98|NT|2000)匹配 "Windows 2000" 中的 "Windows" ，但不能匹配 "Windows 3.1" 中的 "Windows"
?: industr(?:y|ies) 同 'industry|industries'; industr(?:y)即industry
示例
function groupByCommas(n) {
return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
console.log(groupByCommas(1234567)); //1,234,567
下是ES2018-java支持,才刚出的,使()放前面可以识别,具体原因看下解读
?<= (?<=95|98|NT|2000) Windows匹配 "2000 Windows" 中的 "Windows"
?
解读:先了解匹配机制,例字符串是abc,正则是x,x会匹配a;此时继续匹配bc,b不匹配x;此时继续匹配c,c匹配x;最终匹配的值是[a,c]
又例"222222"匹配"2{1,}"返回就一个即"222222"
空格也算一个字符,几个空格几个字符
示例
表或者用"|";表为一体用"()"例 (123)((A)|(B)|(C)),括号很重要否则引起不必要的麻烦,使用例:/^((xx)|(xx)|(xx))$/----使用()使|与/^$/分离,否则^$不起作用
(1[0-1][1-9])?\d 表0-119 不能用[0-119]
分析 0-9 :\d 10-99: [1-9]\d 100-199: 1[0-1]\d
结合上即 (0-9)+(10-99)+(100-199)=119
\数字 注意有时需要转义(在后台)例\\数字
[ab] a|b会被匹配到
([ab])\1 aa|bb会被匹配到
([ab])\1{2}同([ab])\1\1 aaa|bbb会被匹配到
附加参数
g:进行全局匹配
无g:var s = 'aaa_aa_a';var r1 = /a+/;r1.exec(s);匹配返回的都是aaa
有g:多次执行r1.exec(s)返回aaa;aa;a;//下一次是在上次的剩余部分进行匹配
y: 同g类似,下次在上次的剩余部分匹配,但必须在头部才能匹配到(可理解为g与^(头部匹配)的结合)
i:不区分大小写匹配
m:可多行匹配
只有设置了^或$ 才起作用
var str=“ret76 dfsdf
bjfsdfs dffs
b76dsf sdfsdf”;
/^b./mg ->{bj,b7} /^b./m ->{bj} /^b./->null
u:使识别32位的UTF-16 字符(默认正则表达式不会识别)
例/\u{20BB7}/u.test('??');/\u{61}/u.test('a') 解释: "\u{20BB7}"是Unicode 字符表示法(ES6),在正则表达式中必须加上u修饰符,才能识别
. 不会识别四个字节的 UTF-16 字符,加上u修饰符,才能识别
iu//i与u的结合体
s:使得.(一般是和点一起联用)可以匹配任意单个字符包括 换行符,回车符,行分隔符,段分隔符
例 `
`.search(/./s);
其它符号
\f 匹配一个换页符。等价于 \x0c 和 \cL。
\n 匹配一个换行符。等价于 \x0a 和 \cJ。
\r 匹配一个回车符。等价于 \x0d 和 \cM。
\t 匹配一个制表符。等价于 \x09 和 \cI。
\v 匹配一个垂直制表符。等价于 \x0b 和 \cK。
声明
RegExp //字符串类型使用正则见 JSP.HTML.CSS\Javescript\函数，选择器,变量,对象\变量\数据类型
RegExp对象方法 //var a=/表达式/[附加参数]; //a即RegExp对象
例 var regex = /xyz/i;
同var regex = new RegExp(/xyz/i)|('xyz', 'i');
若为new RegExp(/abc/ig, 'i') //原有正则对象的修饰符是ig，它会被第二个参数i覆盖
new RegExp('^xyz$', 'i') 同 /^xyz$/i
exec(String) //当字符串匹配表达式时,返回字符串匹配的那部分.并确定其位置
//var zz=/ss|dd|ee/;
console.log(zz.exec("daddd"));
返回["dd", index: 2, input: "daddd"]
扩展 匹配多个返回集合一般用str.match 方法,ES6又提供一种方式matchAll(现浏览器无法实现)
test(String) //用于检测一个字符串是否匹配表达式,返回true|false
RegExp对象属性
global:是否有g 有则 对象.global=true;否则false
ignoreCase:是否附加参数
multiline:是否有m
unicode :是否有u
sticky :是否有y
dotAll :是否有s
source:返回正则表达式的正文
flags:返回正则表达式的修饰符
具名组匹配,表达式里带(),返回值可获取()所匹配的结果
使用
/\d+\d+/.exec('1053') //["1053", index: 0, input: "1053", groups: undefined]
/(\d+)(\d+)\d/.exec('1053') //["1053", "10", "5", index: 0, input: "1053", groups: undefined]
//1053表匹配到的值,10为第一个()里匹配到的值;扩展若是用?<=|? 给()指定组名格式:(?<组名>xxx);//此时返回值的groups会有值
例var a=/^(?
在表达式里去引用组所对应匹配的,用\k
const RE_TWICE = /^(?
RE_TWICE.test('abc!abc') // true
RE_TWICE.test('abc!ab') // false
选择器结合代码来选中元素节点----有的方法没参会找不着
获取哪块元素被选中
先把jquery对象->DOM对象
用特有属性[0].outerHTML--返回整段被选中的其html语句
如果没有元素被选中
F12---报Cannot read property 'outerHTML' of undefined
注意[0]选中所有符合的第一个,和执行到它的前后顺序有关
注意当某块(元素)被删除的同时,紧接写,各种操作,可以操作被删除那块,超出时执行(获取值,代码选中元素等)不行--猜
参是对选择器二次说明,例$("a").next(".aa .france"),可理解为$("a").next()所选中的元素,同时又需要是$(".aa .france")所选中的元素;
不能理解为 $("a").next(".aa").find(".france")
可以 $(".a").children("div:eq(1)")
<1>
<2>
<3>
<2>
<1>
对应<3>;
<2>是其父级元素
<1><2>是其祖先元素
选.andSelf()同 选.addBack()
选.addBack( [ selector ] )
//var $label = $("p").find("label");
//var $pAndLabel = $label.addBack();// $pAndLabel对象为$("p")与$("p").find("label")之和
// 所有包含类名"active"的元素的上一个紧邻的同辈元素,再加上所有包含类名"active"的元素中的span元素
//var $elements = $(".active").prev().addBack("span");
//document.writeln( getTagsInfo( $elements ) );
选.add( expr [, context ] )
// 这里的s1、s2均表示任意的选择器
$("s1").add("s2");
// 等价于
$("s1,s2");
选.contents()函数用于选取当前匹配元素的所有子节点(包括文本节点、注释节点等)
选.children("选择器");//获取符合条件的子元素集合//选择器不写表所有子元素,不包括子子
例:找到类名为 "selected" 的所有 div 的子元素，并将其设置为蓝色：
$("div").children(".selected").css("color", "blue");
选.closest(要有参)//类似选.parent(参);但其最多返回一个,且从本身开始找(父元素包括父父)
//返回零个或一个元素的 jQuery 对象;能.closest('li').closest('div')格式;.closest第二个使用时注意,此方法是从自身开始找的
//$('li.item-a').closest('li')//选中
选.eq( index )//获取当前jQuery对象所匹配的元素中指定索引的元素，并返回封装该元素的jQuery对象。
//index Number类型指定的索引值，从0开始计数
//$( "selector" ).eq( index );
//等价于
$( "selector:eq(index)" );
选.end()函数用于返回最近一次"破坏性"操作之前的jQuery对象。
选.find()
$("selector").find("selector1");// 等价于$("selector selector1");
选.filter(String/Element/jQuery/Function类型指定的表达式)
// 这里的s1、s2均表示任意的选择器
$("s1").filter("s2");
// 等价于
$("s1s2");
选.first( )
//$( "selector" ).first();
//等价于
//$( "selector:first" );
选.has(String/Element/jQuery类型指定的表达式)//选择其后代元素匹配has括号里的元素 //没有匹配的返回空,如果匹配,则返回,匹配的其后代元素 +其
// 这里的selector、selector1均表示任意的选择器
$("selector").has("selector1");
// 等价于
$("selector:has(selector1)");
选.is(表达式)
表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数
该函数属于jQuery对象(实例)
判断'选'与表达式是否存在交集，如果存在交集就返回true，否则返回false
//判断是否隐藏显示,上:第326行
如果表达式为函数，is()函数将根据匹配的所有元素遍历执行该函数，函数中的this将指向当前迭代的元素。is()还会为函数传入一个参数：即该元素在匹配元素中的索引。
例
var $n3 = $("#n3");
document.writeln( $n3.is("ul") ); // true
document.writeln( $n3.is("[data_id]") ); // true
选.last();
//$( "selector" ).last();
//等价于
//$("selector:last");
选.not(expr)函数用于从匹配元素中删除符合指定表达式的元素
例not("[field='id'],[field='mainid'],[field='opt']")
选.next(可无参);//获取其同辈的下一个元素;当选多个,紧邻的就会多个,参发挥作用来二次选中
选.nextAll(参);//获取其同辈的,所有其后的元素
选.nextUntil([ untilExpr [, filter ] ])函数用于选取每个匹配元素之后所有的同辈元素，直到遇到符合指定表达式的元素为止
选.offsetParent( )//用于查找离当前匹配元素最近的被定位的祖辈元素。
//所谓"被定位的元素"，就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)
选.prev(参);//获取一个紧挨着它前面的一个同辈元素,此时若有参再判断这个同辈元素是否符合此参
选.prevAll(参);//获取其同辈的,所有其前的元素;第一个是离其最近的那个
选.prevUntil()函数用于选取每个匹配元素之前所有的同辈元素，直到遇到符合指定表达式的元素为止
选.parent(参可无);获取当前匹配元素的集合的每个元素的父级元素(所以可如下使用)---parent(参可无)只是选的父级元素--父父不算
//例获.parent().parent().parent().remove();
选.parents(参可无)//从父元素开始!!!,向上遍历，直到文档的根元素为止，将每个祖先元素添加到一个临时的集合--是集合
//有多少返回多少,可:选.parents().parents().remove()//
使用例选.parents("div").eq(0).parent()//表集合的第一个的父元素
选.parents("div").parent()表"集合"的父元素--会返回根元素?
选.siblings(参);//获取与其同辈的所有元素(不包括本体)
选.slice(startIndex [, endIndex ])函数用于选取匹配元素中一段连续的元素，并以jQuery对象的形式返回。