javascript笔记(数学对象-jQuery)

数学对象：

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对象用于处理日期与时间

1. getFullYear()-获取年份，从Date对象以四位数字返回年份
2. getMonth()-获取月份，从Date对象返回月份(0-11) getMonth()方法可返回表示月份的数字，返回值是0(1月)到11(12月)之间的一个整数：注意:1月为0,二月为1
3. getDate()-获取如期，从Date对象返回一个月中的某一天
4. getHours()-获取小时，返回Date对象的小时(0-23)
5. getMinutes()-获取分钟，返回Date对象中的分钟(0-59)
6. gitSeconds()-获取秒，返回Date对象的秒数(0-59)
7. 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")

获取标签

1. 第一中$("p")通过标签名获得标签
2. 第二种$("#id")通过id属性获取标签
3. 第三种$(".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()

1. 第一个是实参，是事件类型
2. 第二个是要处理的子元素
3. 第三个是函数，执行具体的操作

$("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>