数学对象:
Math(算数)对象
- Math对象用于执行数学任务
- Math对象并不像,Date和String那样都是对象的类,因此没有构造函数Math()
Math.PI
Math.PI方法就是π,即圆的周长和它的直径之比这个近似于3.14
Math.floor
Math.floor方法返回小数等于x最大整数(向下取整):
floor()方法返回小于等于x最大整数,如果传递的参数是一个数,该值不变
Math.ceil
Math.ceil()方法可以对一个数进行上舍入:
如果参数是一个整数,该值不变
注意:ceil()方法执行的是向上取整计算,它返回的是大于或等于的参数,并且于之最接近自己的整数
Math.round()四舍五入
Math.round()方法可以把一个数字舍入为最近接的整数
注意:2.4将舍入2,2.5将舍入3
Math.abs()
Math.abs()方法可返回一个数的绝对值
Math.random()
Math.random()返回介于0(包含)~1(不包含)之间的随机数
<script>
// 圆周率
var pi = Math.PI;
// 向下取整
var floor1 = Math.floor(2.1);
var floor2 = Math.floor(2.9);
// 向上取整
var ceil1 = Math.ceil(2.1);
var ceil2 = Math.ceil(2.9);
// 四舍五入
var round1 = Math.round(2.1);
var round2 = Math.round(2.9);
// 绝对值
var abs1 = Math.abs(-3);
var abs2 = Math.abs(3);
// 返回介于0(包含)~1(不包含)之间的随机数
var random = Math.random();
</script>
日期对象
Date(日期)对象
创建Date对象:new Date()
Date() Date对象用于处理日期与时间
- getFullYear()-获取年份,从Date对象以四位数字返回年份
- getMonth()-获取月份,从Date对象返回月份(0-11) getMonth()方法可返回表示月份的数字,返回值是0(1月)到11(12月)之间的一个整数:注意:1月为0,二月为1
- getDate()-获取如期,从Date对象返回一个月中的某一天
- getHours()-获取小时,返回Date对象的小时(0-23)
- getMinutes()-获取分钟,返回Date对象中的分钟(0-59)
- gitSeconds()-获取秒,返回Date对象的秒数(0-59)
- getDay()-获取日期,从Date对象返回一周中的某一天(0-6) gitDay()方法可返回一周(0-6)的某一天的数字
注意:星期天为0,星期一为1,以此类推
通过gitTime()方法可以获取时间戳,时间戳就是指格林威治时间1970年1月1日00时00分00秒(北京时间1970年1月1日00时00分00秒)起指现在的数字
<script>
// 创建处理日期对象
var newDate = new Date();
// 创建变量year,并获取当前年月份
var year = newDate.getFullYear();
console.log(year);
// 创建month变量,并获取当前月份
var month = newDate.getMonth();
console.log(month);
// 创建date变量,并获取当前日期
var date = newDate.getDate();
console.log(date);
// 创建hours变量,并获取当前小时
var hours = newDate.getHours();
console.log(hours);
// 创建minutes变量,获取当前分钟
var minutes = newDate.getMinutes();
console.log(minutes);
// 创建seconds变量,获取当前秒数
var seconds = newDate.getSeconds();
console.log(seconds);
// 创建time变量并获取当前时间戳
var time = newDate.getTime();
console.log(time);
// 创建Day变量,并获取当前日期
var Day = newDate.getDate();
console.log(Day);
</script>
正则表达式
正则表达式,RegExp:是正则表达式
正则表达式描述了字符的模式对象
当检索一个文本时,我们可以使用一种模式来描写要检索的内容
RegExp就是这种模式
简单的模式可以是一个单独的字符,更复杂的模式包含了更多的字符,并可以解析,格式检查,替换等等
也可以规定字符串中的检索位置,以及要检索的字符类型等。
书写写法:var patt = new RegExp(查找或匹配的内容)检索
原则:patt = 1 查找或匹配的内容1检索原则
定义:正则表达式匹配的内容为123
方法:test()方法搜索字符串中指定的值,根据结果返回真或假
<script>
var str = "123456";
// 定义正则表达式匹配内容为23
var patt = /23/;
// 使test方法检索str的内容,匹配正则23
// 如果有则返回值为true,否则返回值为false
document.write(patt.test(str));
</script>
方法:exec()方法检索字符串中的指定值,返回值是被找到的值,如果没有发现匹配,则返回null
<script>
var str = "123456";
// 定义正则表达式匹配内容为23
var patt = /23/;
// 使exec方法,检索str中的内容匹配正则23
// 如果有则返回值为匹配内容,无则返回值null
document.write(patt.exec(str));
</script>
匹配范围
匹配指定任意内容:var reg = /[123]/ 匹配123中任意,一个数
[]指定匹配内容范围
指定所有内容:var reg = /^[123]$/ 匹配123三个连续的数字
^标识开始 $标识结束
匹配数字级字母
匹配数字 var str = /[0-9]/ 匹配0到9中的任意一个数
匹配字母 var str = /[a-z]/ 匹配a到z中的任意一个字母
匹配多位数字或字母:var str = /[a-z]+1/ 匹配a到z多个字母
匹配指定位数:var str = /[a-z]{3}/ 匹配3位字母,第四位字母开始不匹配
var str = /[a-zA-z]{3,8}/ 匹配3-8字母或数字,第9位开始不再匹配
转译特殊符号:通常用斜杠进行转译特殊符号
jQuery
jQuery:是用JS编写的,JS插件/脚本.
<script src="./jquery.js"></script>
<script>标签即可以引用JS文件,有可以书写JS代码,但是不能同时具备这两个功能
$是jQuery的典型特征 如:$("p")
获取标签
- 第一中$("p")通过标签名获得标签
- 第二种$("#id")通过id属性获取标签
- 第三种$(".class")通过class属性获取标签
文本方法
文本方法:text(),没有实参,则是获取该标签的值
有实参,是重新,设置该标签的文本值
var text = $("p").text(1111);
console.log(text);
样式方法
样式方法:css(),传入属性名,会等到该属性值
传入属性名,属性值会重新设置该属性值
var css = $("p").css("color","red");
console.log(css);
属性方法
属性方法:attr()传入属性名,会重新获得该属性
传入属性名,属性值会重新设置该属性值
var att = $("p").attr("name","p");
console.log(att);
$("标").方("参");
事件
事件:通长是一个操作来触发另一个操作
点击事件:通过点击操作来触发另一个功能
点击方法:click()实参为函数
函数内是执行的操作
$("button").click(function(){
var num = $("P").text();
alert(num);
})
获取值:val()
获取值:val()获取标签的值,用于跟input等功能呢类标签
传入实参可从新设置值
$("button").click(function(){
var val = $("input").val();
alert(val);
});
索引方法:index()
索引方法:index()获取当前标签的索引值
索引值获取错误时,显示-1
var li = $("li");
for(var i=0;i<li.length;i++){
console.log($(li[i]).index());
};
隐藏方法,hide()
$("button").click(function(){
$("P").hide(1000);
});
显示方法,show()
$("button").click(function(){
$("P").show(1000);
});
实参是动画持续的时间
this关键字:在事件中this关键字表示被绑定事件的标签(点击谁表示谁)
$("button").click(function(){
console.log(this);
});
获取同级元素
获取同级元素:获取当前元素的所有的同级元素,括号内填入选择器,找到指定同级元素
$("li").click(function(){
console.log($(this).siblings("li"))
})
链式结构
链式结构:当上一个方法为标签时,可以不同再次获取,直接在最后面书写新的方法
$("p").text("这是一句话").css("color","red");
当我们重新使用方法设置之后,返回标签本身
获取上一个元素:prev()
var text = $("p").prev().text();
console.log(text);
获取下一个元素:next()
var text = $("p").next().text();
console.log(text);
获取元素的父级元素:parent()
var text = $("p").parent().text();
console.log(text);
获取子级元素
获取父级下面的所有子级元素
var text = $("div").children().text();
console.log(text);
添加类名操作
添加class属性:addClass("类名")
删除class属性:removerClass("类名")
$("p").click(function(){
$(this).addClass("a").siblings().removeClass();
});
使用jQuery动态创建新的标签
使用jQuery动态创建新的标签,如:$("<li>")
var new_li = $("<li>").text("我是新的li标签");
// 为父级元素添加新的子级元素
$("ul").append(new_li);
删除元素remove()
删除元素remove(),删除原有元素,对动态元素无效
对动态元素要进行操作要使用事件委托
on()
- 第一个是实参,是事件类型
- 第二个是要处理的子元素
- 第三个是函数,执行具体的操作
$("ul").on("click","li",function(){
$(this).remove();
});
on方法中,this表示被处理的子级元素
鼠标的移入移出事件
鼠标移入移出在标签上时,触发该事件
实参是函数,执行具体操作
$("p").mousemove(function(){
$(this).css("color","red");
}).mouseout(function(){
$(this).css("color","blue");
});
失焦/聚焦事件
当标签失去焦点/获得焦点时触发该事件
实参是函数 ,执行具体操作,多用于文本框
$("input").blur(function(){
var inp = $(this).val();
console.log(inp);
}).focus(function(){
var inp = $(this).val();
console.log(inp);
});
//渐入 //渐出 fadeOut() fadeIn() 实参是效果的持续的时间
//上卷 //下拉 slideUp() slideDown() 实参是效果的持续的时间
动画方法 animate();
第一个参数是改变的样式,多个样式用对象表示
第二个参数是效果持续的时间,单位是毫秒
$("p").click(function(){
$(this).animate({
"font-size":"20px",
"margin-top":"100px"
},1000);
})
删除属性方法:removeAttr()
删除属性方法:removeAttr()删除标签的属性,实参是删除的属性名
$("button").click(function(){
$("img").removeAttr("src")
})
清空方法:清空被选元素的所有子元素,对被选元素本身,没有任何影响
$("button").click(function(){
$("ul").empty()
})
鼠标移入事件:鼠标移动时,触发该事件
$("li").mousemove(function(){
console.log(1)
})
被选中的单选框会增加checked属性,通过该属性可以找到被选中的单选框
<body>
<input type="radio" name="" id="" value="小明" checked>
<input type="radio" name="" id="" value="小王">
<script>
var input_val = $("input[type=radio]:checked").val();
alert(input_val);
</script>
</body>
被选中的下拉框具备selected属性
<select name="" id="">
<option value="小王">小王</option>
<option value="小明">小明</option>
</select>
<script>
var a = $("select option:selected").val();
alert(a);
</script>
设置被选中的下拉框
<select name="" id="">
<option value="小王">小王</option>
<option value="小明">小明</option>
</select>
<script>
$("select option").val(2);
</script>
多选框被选中时,也具备checked属性,返回结果是以数组的形式返回
要获取每一个被选中的值,需要遍历数组。
<input type="checkbox" name="" id="" checked>
<input type="checkbox" name="" id="" checked>
<input type="checkbox" name="" id="" checked>
<script>
var a = $("input[type=checkbox]:checked");
for(var i=0;i<a.length;i++){
var inp = $(a[i]).val();
console.log(inp);
}
</script>
遍历标签集合,并为每一项执行操作
each:遍历方法,传入函数作为实参,效果等同于for循环。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button>点击</button>
<script>
$("button").click(function(){
$("ul li").each(function(){
var text = $(this).text();
console.log(text);
})
})
</script>
eq方法:找到集合中指定索引值的元素,并进行操作
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button>点击</button>
<script>
$("button").click(function(){
var text = $("ul li").eq(0).text();
console.log(text);
})
</script>