维信实习javascript部分笔记1

最新推荐文章于 2022-09-03 17:59:56 发布

迷茫中前进

最新推荐文章于 2022-09-03 17:59:56 发布

阅读量157

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_40650532/article/details/88689804

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

维信实习javascript部分笔记1

1.javascript部分
2.jquery部分

1.javascript部分

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。（百度百科）

1) json

1.json的格式
jsonObj = {key1:value1, key2:value2};

一个json对象可以包含一个或多个键值对，其中属性名必须使用双引号 “” 包起来。
这个和java里面的map类似。
2. 获取json中的属性值

// 创建json对象
person = {"name":"lisi", "age":19};
// 获取姓名和年龄
name = person['name'];
age = person['age'];

2) javascript 代码在页面中的位置

1.head标签内部

<head>
	<script>javascript code</script>
</head>

2.body标签的后面

</body>
	<script>javascript code</script>
</html>

3.行内

// 举个例子: button
<button onclick="javascript:alert('hello');">click here</button>

4.外部
引入外部js文件

<script src="location"></script>

3) 时间对象

	// 怎样获取（创建）时间对象
    date = new Date();
    date.setFullYear('2009');
	// 获取时间对象某些属性的方法
    year = date.getFullYear();
    month = date.getMonth()+1;
    day = date.getDate();

    hour = date.getHours();
    minute = date.getMinutes();
    second = date.getSeconds();

    console.log(date);
    console.log(year);
    console.log(month);
    console.log(day);
    console.log(hour);
    console.log(minute);
    console.log(second);

4) 超时器和定时器

1.超时器
setTimeout(function, ms)
加载该方法后，经过ms的时间，执行function

两个参数的含义：第一个参数表示回调函数，第二个参数表示毫秒数。

code：

// 三秒跳转到百度
setTimeout(function(){
	location = 'http://www.baidu.com';
}, 3000);

2.定时器
setInterval(function, ms)
加载该方法后，每过ms的时间，执行一次function。参数含义和超时器相同。

一个小案例–时钟：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #showtime {
            width: 200px;
            height: 100px;
            background: green;
            margin: 0 auto;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="showtime"></div>
</body>

<script>
    showtime = document.getElementById("showtime");

    setInterval(function() {
        date = new Date();

        hour = date.getHours();
        min = date.getMinutes();
        sec = date.getSeconds();

        time = (hour > 9 ? hour : '0'+hour)
             +":" + (min > 9 ? min : '0'+min)
              + ":" + (sec > 9 ? sec : '0'+sec);
              
        document.getElementById('showtime').innerHTML = time;
    }, 1000);
</script>
</html>

2.jquery部分

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。（百度百科）

1）jquery选择器

在使用jQuery的时候首先需要导入jQuery的js文件

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

1.标签选择器

// 获取所有的div元素
$('div')

2.类选择器

// 获取所有class为c1的元素
$('.c1');

3.id选择器

// 获取id为d1的元素
$('#d1');

4.获取所有元素

$("*");

5.属性选择
html:

<div data="abc"></div>

js:

//获取上面的div除了使用标签选择，还可以使用另一种方式
$('[data=abc]');

2) 筛选

这里提供一段html代码，下面的操作都参照此代码：

<div>div1</div>
<div>div2</div>
<div class="c1">div3</div>
<div>div4</div>

1.首先提供一个方法，该方法可以修改css样式
css(属性名, 属性值)，该方法还能获取css样式的属性值

2.筛选的几个方法我们都放在下面这段代码中

// html代码使用的是1中的代码

// 获取第一个div并将其文字颜色修改为红色
$('div").first().css('color', 'red');

// 将最后一个div的文字颜色也修改为红色
$('div").last().css('color', 'red');

// 获取第二个div，并将其文字修改为粗体
$('div').eq(2).css('font-weight', 'bold');

//将所有匹配的元素（除了class=c1的元素）背景色设为蓝色
$('div').not('.c1').css('background-color','blue');

3) 样式修改和获取

1.样式修改在我们的筛选中已经涉及到了，使用css(属性名, 属性值)方法
这个方法有一个返回值，返回的还是调用这个方法的jquery对象。所以
我们可以这样使用这个方法：

// 修改第一个div字体颜色为绿色，背景色为红色
$('div').first().css('color', 'green').css('background', 'red');

2.这样进行样式的修改不是很方便，每修改一个样式就得调用一次css方法，并不推荐。该方法的参数支持json：

// 想要实现上面的效果，可以这样使用该方法
$('div').first().css({"color":'green', "background":'red'};

3.css方法不仅用于设置属性，还可以用于获取属性值。在jquery中这样的方法是很常见的。简单的写一下：

// 获取第一个div的color属性
$('div').first().css('color');

4)属性的获取和设置

不论是获取还是设置使用的都是同个方法–attr(),根据参数的不同进行获取和修改。

// html代码
<div name="d1" class="divc"></div>

1.获取

// 获取上面的div的name属性
$('.divc').attr('name');

2.设置

// 将div的class属性设置为dd
$('div').attr('class', 'dd');

5)对于标签的class属性的操作

上面是对标签的所有属性进行操作的方式，这里有专门操作class属性的方法。
css：这里存在两个类，一个字体颜色，一个背景色

．cred {
	color:red;
}

.bggreen{
	background-color:green;
}

html:

<div class="cred">font</div>

1.添加属性值
一个或多个要添加到元素中的CSS类名，使用空格分开

// 添加一个css类--bggreen，这样就可以修改背景色为绿色
$('.cred').addClass('bggreen');
// 如果有多个class需要添加，使用空格分开

2.移除属性值

// 移除背景色的类
$('.cred').removeClass('bggreen');

3.切换属性值（如果存在就删除，如果不存在就添加）

// 涉及到一个方法 ： onclick(fn)， 这个方法和js原生语法中的onclick事件的作用相同
$('div').click(function() {
	// 当我们点击该div时，背景色会有一个出现和消失的效果
	$('div').toggleClass('bggreen');
});

6) 标签内容的操作（两个标签之间的部分）

html:

<div><h1>text<.h1></div>

1.获取
有两个方法，都可以获取html标签里面的文本内容：
1）html()
2）text()

// 获取div中的文本内容
$('div').text();
$('div').html();

2.写入
同样是使用上面两个方法

/*
 *这两个方法的不同之处就在于写入的时候：html()是遇到标签会被解析成html代码
 * 而text() 方法在遇到html代码时会转成字符串显示在页面上*/
$('div').text('<h2></h2>');
$('div').html('<h2></h2>');
// 上面两个虽然都是写入，但是显示结果是不同的

迷茫中前进

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
维信实习javascript部分笔记1

维信实习javascript部分笔记11.javascript部分1) json2) javascript 代码在页面中的位置3) 时间对象4) 超时器和定时器2.jquery部分1）jquery选择器2) 筛选3) 样式修改和获取4)属性的获取和设置5)对于标签的class属性的操作6) 标签内容的操作（两个标签之间的部分）1.javascript部分JSON(JavaScript Obje...
复制链接

扫一扫