js基本语法和方法的使用

2018-08-21  本文已影响0人  向前冲我在路上

一、js的四种引方式和三种打印方式

四种引入方式:
(1)<a href="javascript:alert('集合,准备团战')">百度一下</a>
(2)<div style="width:200px; height:200px; background-color:red" onclick="alert('等等我,马上到')"></div>
(3)在html页面的任何位置加入 <script>js代码</script>
(4)在html页面的任何位置加入 <script src='js.js'></script>
三种打印方式:
(1)alert弹窗打印
(2)console.log('打印的内容') 结合浏览器控制台查看
(3)document.write('打印的内容') 往html文档中写内容

二、js中的函数

全局变量和局部变量:

    全局变量:直接定义的变量,全局有效
        加var和不加var都一样

    局部变量:函数体内定义的变量,只在函数体内有效
        如果局部前面有var,该变量真是一个局部变量
        如果局部前面没有var,该变量其实是一个全局变量,在函数调用之后,该变量即可随便使用
        上面知道即可,一般情况定义变量都加var
        如果局部和全局同名,优先使用局部变量

匿名函数:
    没有函数名的函数,需要将其赋给一个变量,然后变量按照函数的形式进行调用即可:下面a就是一个匿名函数。

var a = function () {
alert('这是一个函数')
}
a()

封闭空间
    将匿名函数用小括号括起来,然后在后面再加一个小括号调用这个匿名函数,称之为封闭空间。

(function (m, n) {
alert('炊烟袅袅升起,隔江千万里===' + m + n)
})('周杰伦', '双节棍')

//在js中将函数作为参数传到另一个函数中
    function cacl(m, n, fn) {
        return fn(m, n)
    }

    // alert(cacl(100, 200, sub))
    alert(cacl(100, 200, function (m, n) {
        return m * n
    }))

三、数组和字符串

定义:array
遍历:
数组定义通过索引进行访问,索引从0开始
但是数组也可以通过属性值追加属性和值,但是一般不这么使用
遍历的时候,通过 for 进行遍历只能遍历索引数组,通过for in 进行遍历,既可以遍历索引,又可以遍历属性

字符串遍历
    通过索引进行遍历,索引从0开始
<script>
var arr1 = [1, '周杰伦', 2, '王力宏']
arr1['name'] = '狗蛋'
arr1['height'] = 180
// var arr = []
// var arr2 = new Array()

通过下标进行访问,下标从0开始
alert(arr1[1])
alert(arr1)
alert(arr1['name'])
console.log(arr1[4])

js中遍历数组
for (var i = 0; i < arr1.length; i++) {
  console.log(arr1[i])
}

for (var i in arr1) {
   console.log(arr1[i])
}
js中字符串的遍历
string1 = '12345,上山打老虎'
for (var i = 0; i < string1.length; i++) {
  console.log(string1[i])
}
</script>

四、js中的对象

创建对象的三种方式:
(1)构造方法
(2)通过官方创建
(3)直接写一个对象即可

    obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}
    属性的引号可以添加也可以不添加,一般就不加了
    使用时候
    obj['name']   或者  obj.name

    在js中json格式字符串和js对象相互转化的函数
    将js对象转化为json字符串
        string = JSON.stringify(obj)
    json字符串转化为js对象
        obj = JSON.parse(string)
        obj = eval('(' + string + ')')
<script>
//构造方法创建对象,(js中一般不用)
function Person(name, age, height, weight) {
 this.name = name
 this.age = age
 this.height = height
 this.weight = weight
 this.say = function () {
     console.log('我的名字叫做' + this.name + '==我的年龄为' + this.age + '==我的身高为' + this.height + '==我的体重为' + this.weight)
 }
}
obj = new Person('黄晓明', 40, 150, 200)
obj.say()


// 创建对象方式2
// obj = new Object()
// obj.name = '黄晓明'
// obj.age = 40
// obj.height = 150
// obj.say = function () {
//     alert('haha')
// }
// console.log(obj)

// 创建对象方式3
// json格式,前后端交互使用的格式,json格式在js里面原生支持
obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}

// 没有这种写一个class,然后里面写属性写方法这种特点了
// console.log(obj.name)
// console.log(obj['name'])
// 将js里面的对象转化为json格式字符串
string = JSON.stringify(obj)
// console.log(typeof(string))
// js如何将json格式字符串转化为js对象
// ming = JSON.parse(string)
ming = eval('(' + string + ')')

console.log(ming)
</script>

五、函数中的方法

常用对象和函数:

parseInt(字符串):
将字符串转化为整型,必须以数字开头,只要碰到非数字,转化结束。
如果以非数字开头,转化为NaN。
两个NaN不能判断是否相等,判断是不是NaN可以使用 isNaN函数 判断是不是NaN,是返回true,不是返回false。
parseFloat(字符串):
将字符串转化为浮点,必须以数字开头,碰到非数字立马结束,小数点不算
如果以非数字开头,转为NaN
Math对象
abs : 绝对值函数
ceil : 向上取整
floor : 向下取整
max : 取最大的值,传递过个参数,找到最大值
min : 传递多个参数,找到最小值
pow : 求幂
random : 随机值 只能随机0-1之间的小数,如果需要随机5-10之间的数,自己实现
round : 四舍五入函数
字符串常用函数
indexOf : 字符串查找函数,返回查找到的字符串的第一个字母的下标,如果找不到,返回-1 类似于python里面的find
lastIndexOf : 字符串查找函数,找最后一次出现的位置,找不到返回-1,类似于python里面的rfind
substr : 字符串的提取 substr(start, length) 从start开始提取length个字符
replace : 字符串替换,只能替换第一个 string.replace(old, new)
toLowerCase : 全部转化为小写
toUpperCase : 全部转化为大写
fromCharCode : 所有的大写 65-90 所有的小写 97-122 数字 48-57
split : 按照特定的字符进行切割
数组常用函数
push : 给数组追加一个元素
pop : 弹出最后一个元素,只能这么做
shift : 弹出数组中第一个元素
unshift : 数组最前面添加一个元素
join : 字符串拼接 arr.join('*') 将列表里面所有的字符串按照 * 拼接
reverse : 将数组逆序
slice : slice(start, end) [start, end) 左闭右开
sort : 排序,如果都是数字,默认按照数字的ascii进行排序,如果想按照数字大小排序
arr.sort(function (a, b) {return a > b}) 从小到大排序
日期对象常用函数
getDate : 获得日期
getDay : 获得星期几 0-6 0表示周天
getMonth : 0-11 当前月份减一
getFullYear : 得到年份
getHours : 得到小时 24小时进制
getMinutes : 得到分钟数
getSeconds : 得到秒数
getTime : 时间戳,毫秒数

    每一个都有对应的设置方法,自己看看
    创建日期对象的方式
    // 创建当前时间的时间对象
    d = new Date()
    // 根据指定的时间戳创建时间对象
    d = new Date(1534750144520)
    // 根据时间字符串创建时间对象
    d = new Date('2018/8/20 15:29:04')
    // 根据年月日时分秒值创建对象
    d = new Date(2018, 7, 20, 15, 29, 4)

5、js简单演示
背景切换
核心:页码中有一个标签,如果想给标签添加点击事件,只需要写onclick,如果想添加其它的,添加对应事件即可。在事件的后面就要写代码,通过js的DOM操作找到指定节点,将节点的属性修改即可
6、获取对象
DOM操作,document object mxxx, 文档操作,document就是整个文档对象
document.getElementById 得到指定对象
document.getElementsByClassName 得到对象集合,符合类名要求的都可以得到
document.getElementsByName
document.getElementsByTagName 得到对象集合
7、常用事件
onmouseover :鼠标移动上去触发
onmouseout : 鼠标离开的时候触发
onmouseup : 鼠标按下松开的时候触发
onmousedown : 鼠标按下的时候触发
onmousemove : 鼠标移动的时候触发
onclick : 点击的时候触发
ondblclick : 双击的时候触发
如下两个用在input框中
onblur : 失去焦点
onfocus : 获取焦点
8、获取、设置属性和内容
获取属性
odiv.id
odiv.className
odiv.style.width
odiv.style.height
odiv.style.backgroundColor
【注】在css中带杠的属性,到js中都修改为小驼峰即可
获取内容
odiv.innerHTML 获取标签里面的所有文本内容,带标签
odiv.innerText 获取标签里面的纯文本内容
点和中括号区别
能使用点的地方肯定能使用中括号,能使用中括号的地方不一定能使用点
点后面只能跟属性名
中括号里面可以写属性名字符串,也可以写变量
显示隐藏图片
this使用
切换背景色
表单内容控制
9、onload函数

上一篇下一篇

猜你喜欢

热点阅读