暑假JavaScript学习第五天

最新推荐文章于 2024-07-19 15:16:23 发布

小渣渣～

最新推荐文章于 2024-07-19 15:16:23 发布

阅读量74

点赞数

文章标签：学习

原文链接：https://www.bilibili.com/video/BV1YW411T7GX?p=107&spm_id_from=pageDriver&vd_source=a6f2e2c3a20c2b60e407da55d5750b25

版权

<script type="text/javascript">
			/*在调用函数时，浏览器每次都会传递进两个隐含的参数
			1.函数的上下文对象this
			2.封装实参的对象arguments
			arguments是一个类数组对象，它也可以通过索引来操作数据，也可以获取长度
			在调用函数时，我们所传递的实参都会在arguments中保存
			
			*/
		   /*Date对象
		   在js中使用Date对象来表示一个时间
		   创建一个Date对象
		   
		   */
		  var d=new Date();
		  console.log(d);
		  //创建一个指定的时间对象
		  //需要在构造函数中传递一个表示时间的字符串作为参数
		  //日期的格式 月份/日/年 时：分：秒
		  var d2=new Date("12/03/2022");
		  console.log(d2);
		  var date=d2.getDate();
		  console.log("date="+date);
		  /*Math
		  Math和其他的对象不同，它不是一个构造函数，
		  它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
		  Math.PI表示的圆周率
		  */
		  console.log(Math.PI);
		  //abs()可以用来计算一个数的绝对值
		  console.log(Math.abs(-1));
		  //Math.ceil()
		  //可以对一个数进行取整，小数位只要有值自动进1
		  console.log(Math.ceil(1.4));
		  //Math.floor()
		  //向下取整，小数部分会被舍掉
		  console.log(Math.round(1.99));
		  //Math.round()
		  //可以对一个数进行四舍五入取整
		  console.log(Math.round(1.4));
		  //Math.random()
		  //可以用来生成一个0-1之间的随机数
		  console.log(Math.random());
		  Math.pow(x,y)
		  //返回x的y次幂
		  console.log(Math.pow(12,3));
		  Math.sqrt()
		  //用于对一个数进行开方运算
		  
		</script>

/*使用字面量来创建正则表达式
		语法：var 变量=/正则表达式/匹配模式
		使用字面量的方式创建更加简单
		使用构造函数创建更加灵活
		*/
	   // var reg=new RegExp("a","i");
	   //上面表达式可写成如下
	   reg=/a/i;
	   console.log(reg.test("abc"));
	   //创建一个正则表达式，检查一个字符串中是否有a或b
	   /*使用|表示或者的意思
	   reg=/ab/表示ab都有
	   */
	  reg=/a|b/;
	  console.log(reg.test("bacd"));
	  /*
	  创建一个正则表达式检查一个字符串是否有字母
	  */
	 //reg=/a|b|c|d|e|f/;
	 reg=/[ab]/
	 console.log(reg.test("cdfg"));
	 /*
	 []里面的内容也是或的关系
	 [ab]==a|b
	 [a-b]==a到任意的小写字母
	 [A-Z]==任意大写字母
	 [A-z]==任意字母
	 [0-9]==任意数字
	 */
	reg=/[a-z]/
	console.log(reg.test("h"));
	
	reg=/[A-Z]/
	reg=/A-z/
	//检查一个字符串中是否含有abc或aec
	reg=/abc|adc|aec/
	console.log(reg.test("abc"));
	/*
	[^]除了
	*/
	 reg=/[^ab]/;
	 reg=/[^0-9]/;
	 console.log(reg.test("12a345"));

var str="1a2b3c4d5e6f";
		/*
		split()
		-可以将以个字符串分为一个数组
		方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串
		*/
	   var result =str.split("c");
	     var result1 =str.split(/[A-z]/);
		console.log(result);
		console.log(result1)


	   str="hello abc hello abc";
	   /*
	   搜索字符串中是否含有abc或aec或afc
	   */
	   result=str.search("abcb");
	   console.log(result);
	   /*
	   match()
	   -可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
	  -默认情况下我们的match智慧找到第一个符合要求的内容，找到以后就停止检索
	  我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容（/[a-z]gi/）
	  我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容
	   可以为一个正则表达式设置多个匹配模式，且顺序无所谓
	   match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
	   */
	  str="1a2b3c4d5e6f7";
	  result=str.match(/[A-z]/gi);
	    console.log(result);

relace()
		-可以将字符串中指定内容替换为新的内容
		参数
		1.被替换的内容,可以接受一个正则表达式作为参数
		2.新的内容
		-默认只会替换第一个
		*/
	   result=str.replace(/[a-z]/gi,"@_@");
	   console.log(result);

邮件格式

 /*
	 \w查找单词字符
	 \W查找非单词字符
	 \d查找数字
	 \D查找非数字字符
	 \s查找空白字符
	 \S查找非空白字符
	 \b匹配单词边界
	 \B匹配非单词边界
	 \o查找NUL字符
	 \n查找换行符
	 \f查找换页符
	 \r查找回车符
	 \t查找制表符
	 \v查找直制符
	 \xxx查找以八进制数xxx灰顶的字符
	 \xdd查找以十六进制数dd规定的字符
	 \uxxxx查找以十六进制数xxx规定的Unicode字符
	 电子邮件
	 hello  .nihao  @abc.com.cn
	 任意数字下划线，任意数字字母下划线@ 任意字母数字
	 \w{3,} (\.\w+)* @ [A-z0-9]+  (\.[A-z]{2,5}{1,2})
	 */
	var emailReg= /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
	var email="abc@abc.com";
	console.log(emailReg.test(email));

DOM（document object model）

	//
	var btn=document.getElementById("btn");
	//修改按钮的文字
	btn.innerHTML="i'm Button";
/*
	可以为按钮的对应事件绑定处理函数的形式来响应事件
	这样当事件被触发是，其对应的函数将会被调用
	*/

//绑定一个单击事件
//绑定这种为单击事件绑定的函数，我们称为单击响应函数
btn.οnclick=function(){
alert("你还点");
};

<body>
       <button id="btn">点我一下</button>
       <script type="text/javascript">
           //获取id为btn的按钮
           var btn =document.getElementById("btn")
           //为按钮绑定一个单击响应函数
           btn.οnclick=function(){
               alert("hello");
               };
       </script>
   </body>

window.οnlοad=function(){
                   //为id为btn01的按钮绑定一个单击响应函数

                           var btn01 =document.getElementById("btn01");

                           btn01.οnclick=function(){
                               //查找#bj节点
                               var bj=document.getElementById("bj")
                           //打印bj
                           //innerHTML通过这个属性可以获取到元素内部的html代码
                           alert(bj.innerHTML);
                               };
               };

点11下才结束

//查找#bj节点
                               var btn02=document.getElementById("btn02") ;
                               btn02.οnclick=function(){
                                   //查找所有li节点
                                   //getElementsByTagName()可以根据标签名回去一组元素节点对象
                                   //这个方法会给我们返回一个类数组对象，所有查询到的元素都会装到对象中
                                   //即使查询到的元素只有一个，也会封装到数组中返回
                                   var lis=document.getElementsByTagName("li");
                                   //打印lis
                                   // alert(lis.length);
                                   //变量lis
                                   for(var i=0;i<lis.length;i++){
                                       alert(lis[i].innerHTML);
                                   }
                               };

//为id为btn03的按钮绑定一个单击响应函数
                               var btn03=document.getElementById("btn03");
                               btn03.οnclick=function(){
                                   //查找name=gender的所有节点
                                   var inputs=document.getElementsByName("gender");
                                   //alert(inputs.length);
                                   for(var i=0;i<inputs.length;i++){
                                       //innerHtml用于获取元素内部的HTML代码
                                       //alert(input[i].innerHTML);
                                       //如果需要读取元素节点属性，直接使用元素.属性名
                                       alert(inputs[i].value);
                                   }
                               };
               };

//为id=btn05的按钮绑定一个单击响应函数
                               var btn05=dcument.getElementById("btn05");
                               btn05.οnclick=function(){
                                   //获取id为city的节点
                                   var city =document.getElementById("city");
                                   //返回#city的所有子节点
                                   /*
                                   childNodes属性会获取包括文本节点在内的所有节点
                                   根据DOM标签标签空白也会当成文本节点
                                   主义：在IE8及以下的浏览器中，不会将空白文本当成子节点
                                   所以该属性在IE8中会返回4个元素二其他浏览器是9ge

                                   */
                                   var cns=city.childNodes;
                                   //alert(cns.length);
                                   var cns2=city.children;
                                   alert(cns2.length);
                               };
                               //为id为btn06的按钮绑定一个单击响应函数
                               var btn06=document.getElementById("btn06");
                               btn06.οnclick=function(){
                                   //获取id为phone的元素
                                   var phone=document.getElementById("phone")
                                   //返回#phone的第一个子节点
                                   //phone.childNodes[0];
                                   //firstChild可以获取当前元素的第一个子节点(包括空白文本节点)
                                   var fir=phone.firstChild;
                                   //firstElementChild获取当前元素的第一个子元素
                                   fir=phone.firstElementChild;
                               }



               };