html5实训考点

最新推荐文章于 2023-08-19 17:35:07 发布

原创最新推荐文章于 2023-08-19 17:35:07 发布 · 748 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #linq

本文主要介绍了HTML5中的元素选择器、ID选择器和类选择器的使用，以及jQuery中如何操作元素属性和隐藏显示。内容涵盖jQuery选择器、DOM操作、事件处理和数组方法，还涉及到JavaScript的时间获取和媒体查询。此外，文章还讨论了JavaScript中的数据类型、基本数据类型与引用数据类型，以及数据结构和算法中的数组操作。

jq选择器

元素选择器

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

$("p")

用户点击按钮后，所有 <p> 元素都隐藏：

实例

$(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); });

#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下：

$("#test")

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

实例

$(document).ready(function(){ $("button").click(function(){ $("#test").hide(); }); });

<body>

<h2>这是一个标题</h2>

<p>这是一个段落</p>

<p id="test">这是另外一个段落</p>

</body>

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

$(document).ready(function(){

$("button").click(function(){

$(".test").hide();

});

</script>

</head>

<body>

<h2 class="test">这是一个标题</h2>

<p class="test">这是一个段落。</p>

2.获取数组长度的方法

var arr=[2,6,1,5,22,3,66,12,9];

arr.length;

操作数组的几种方法

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

1.shift

//删除原数组的第一项，并返回删除元素的值，如果数组为空则返回undefined

var a=[1,2,3,4,5];

var b=a.shift();//a:[2,3,4,5] b:1

2.unshift

//将参数添加到原数组开头，并返回数组的长度

var a=[1,2,3,4,5];

var b=a.unshift(-2,-1);//a;[-2,-1,1,2,3,4,5] b:7//注：此方法在ie6.0下

//测试的返回值始终为undefined，在firefox下测试的返回值为7，所以此方法不可靠

//一般需要用返回值时可用splice代替

3.pop

//删除原数组的最后一项，并返回删除元素的值；如果数组为空则返回undefined

var a=[1,2,3,4,5]

var b=a.pop();//a:[1,2,3,4] b:5

4.push

//将参数添加到原数组末尾，并返回数组的长度

var a=[1,2,3,4,5];

var b=a.push(6,7);//a:[1,2,3,4,5,6,7] b:7

5.concat

//返回一个新数组，是将参数添加到原数组中构成的

var a=[1,2,3,4,5]

var b=a.concat(6,7)//a:[1,2,3,4,5] b:[1,2,3,4,5,6,7]

6.splice

//splice(start,deleteCount.val1,val2,...):从start开始删除deleteCount项

//并从该位置起插入val1,val2,...

var a=[1,2,3,4,5];

var b=a.splice(2,2,7,8,9)//a:[1,2,7,8,9,5] b:[3,4]

7.reverse

//将数组反序

var a=[1,2,3,4,5]

var b=a.reverse();//a:[5,4,3,2,1] b:[5,4,3,2,1]

8.sort(orderfunction)

//按指定的参数对数组进行排序

var a=[1,2,3,4,5]

var b=a.sort();//a:[1,2,3,4,5] b:[1,2,3,4,5]

9.slice(start,end)

//返回从原数组指定开始的下标到结束下标之间的项组成的新数组

//不改变原数组

var a=[1,2,3,4,5]

var b=a.slice(2,5)；//a:[1,2,3,4,5] b:[3,4,5]

10.join(separator)

//将数组的元素组起一个字符串，以separator为分隔符，省略

//的话则用默认的逗号为分隔符

var a=[1,2,3,4,5]

var b=a.join("|");//a:[1,2,3,4,5] b:"1|2|3|4|5"

11.indexOf

//数组元素索引并返回元素索引，不存在返回-1,索引从0开始

var a = ['a','b','c','d','e'];

a.indexOf('a');//0

a.indexOf(a);//-1

a.indexOf('f');//-1

a.indexOf('e');//4

</script>

数组操作的方法

shift：删除第一位并返回删除的元素

unshift：数组最前面添加数据

pop:删除最后一位并返回删除的元素

splice:第一位起始值第二位删除的数量第三到N是添加到数组中

join:将数组转化为字符串

push：向数组末尾添加元素并返回新的数组长度

reverse：翻转数组

slice：（start，end）截取数组

indexOf:查找数组中数据是否存在并返回其索引值

concat：将数组连接到数组末尾

sort：数组排序

var arr = [4,3,6,5,7,2,1];

arr.sort();

console.log(arr);

//输出结果[1,2,3,4,5,6,7]

var arr = [4,3,6,5,7,2,1];

arr.sort();

arr.sort(function(a,b){

return b-a;

});

console.log(arr);

//输出结果[7,6,5,4,3,2,1]

在JS中使用媒体查询

// 创建媒体查询列表对象var mql = window.matchMedia("(orientation: portrait)");// 添加监听器

mql.addListener(handleOrientationChange);// 在当前状态下调用一次监听函数，更新当前媒体查询的结果，防止当前状态与开发者默认的状态不一致handleOrientationChange(mql);// 创建监听函数function handleOrientationChange(mql) {

if (mql.matches) {

/* The viewport is currently in portrait orientation */

} else {

/* The viewport is currently in landscape orientation */

}}// 移除监听器

mql.removeListener(handleOrientationChange);

盘点js所有的触发事件

2021-12-17 10:40:53

1.鼠标事件

鼠标在元素上移动 mousemove

鼠标从该元素上移出 mouseout

鼠标移动到该元素 mouseover

鼠标点击(单击) click

鼠标双击 dbclick

鼠标右击 contextmenu 可以配和event的preventDefault()方法来禁用鼠标右击

2.键盘事件

键盘按下 keydown

键盘按下 keypress 区别于keydown keydown不能识别键盘大小写，而keypress不能识别特殊按键列如esc，f1之类的

键盘松开 keyup

3.其它事件

浏览器窗口大小发生改变时 resize 其实感觉这个和媒体查询差不多

浏览器加载事件 window.onload

浏览器滚动轴事件 scroll 当滚动轴发生改变是触发这个事件

元素获取焦点事件 focus 元素获取焦点后执行这边的函数

元素失去焦点事件 blur 元素失去焦点后触发该事件

js截取字符串的三种方法

2022-04-24 16:56:15

substring() 方法

substr() 方法

slice() 方法

substring() 方法，substirng(from,to)方法从from位置截取到to位置，to可选，没有设置时默认到末

var str = 'www.baidu.com'

console.log(str.substring(4))//baidu.com

console.log(str.substring(4,7))//bai

substr() 方法，substr() 方法可在字符串中截取从开始下标开始的指定数目的字符

var str = 'www.baidu.com'

console.log(str.substr(4,6)) //baidu.

3、slice() 方法，slice(start, end) 方法用于提取字符串的某个部分（从参数start到end位置），并以新的字符串返回被提取的部分。类似substring()

var str = 'www.baidu.com'

console.log(str.slice(4)) //baidu.

comconsole.log(str.slice(4,10)) //baidu.

attr(attrName) 获取属性
参数 : 属性名称
返回 : 对应属性的值，获取失败返回 null

console.log(h('#test').attr('id'));</script>

2、attr(attrName, value) 设置属性
参数 : 属性名称, 对应的值
返回 : h.js 操作对象，可以进行连贯操作

h('#test').find('im').attr('src', '2.png');</script>

3、removeAttr(attrName) 删除属性
参数 : 属性名称
返回 : h.js 操作对象，可以进行连贯操作

hi...</div><script type="text/javascript" src="js/h.js"></script><script type="text/javascript" charset="utf-8">

h('#test').removeAttr('id');</script>

js charAt的用法

<html>

<body>

var str="Hello world!"

document.write("The first character is: " + str.charAt(0) + "<br />")

document.write("The second character is: " + str.charAt(1) + "<br />")

document.write("The third character is: " + str.charAt(2))

</script>

</body>

</html>

结果：

The first character is: H

The second character is: e

The third character is: l

定义和用法

charAt() 方法可返回指定位置的字符。

请注意，JavaScript 并没有一种有别于字符串类型的字符数据类型，所以返回的字符是长度为 1 的字符串。

语法

stringObject.charAt(index)

参数描述

index 必需。表示字符串中某个位置的数字，即字符在字符串中的下标。

提示和注释

注释：字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length 之间，该方法将返回一个空字符串。

实例

在字符串 "Hello world!" 中，我们将返回位置 1 的字符：

var str="Hello world!"

document.write(str.charAt(1))

</script>

以上代码的输出是：

9.jQuery操作节点(选择、创建、添加、复制、删除)

选择节点：

.parents() //获取当前节点所有的父节点,可以配合eq选择器选择到某一层父节点

.parent() //获取当前父节点

.children() //获取当前子节点返回一个集合

.children("表达式") //可以进行筛选例(div[class='one']

.children[下标] //通过下标筛选

.next() //下一个兄弟节点

.prev() //上一个兄弟节点

.siblings() //所有的兄弟节点

.siblings("表达式") //可以进行筛选

remove() //删除节点

创建节点：

$("要创建的节点")

插入节点：

内部插入：

//内部插入节点前为最前方，后为最后方

append()

//追加至节点后

A.append(B) //B追加至A节点后面

appendTo()

//追加至节点后

A.appendTo(B) //A追加至B节点后面

prepend()

//追加至节点前

A.prepend(B) //B追加至A节点前面

prependTo()

//追加至节点前

A.prependTo(B) //A追加至B节点前面

外部插入：

after()

//插入至节点后

A.after(B) //B插入到A后面

insertAfter()

//插入至节点后

A.insertAfter(B)//A插入到B后面

before()

//插入至节点前

A.before(B) //B插入到A前面

insertBefore()

//插入至节点前

A.insertBefore(B)//B插入到A前面

替换节点：

replaceWith()

//替换节点

A.replaceWith(B)//吧A替换成B

replaceAll()

//替换节点

A.replaceAll(B)//吧B替换成A

复制节点：

clone()

//复制节点

删除节点：

remove()

//删除节点

A.remove() //删除remove节点

remove(A) //删除remove节点

js中获得当前时间

var myDate = new Date();

myDate.getYear(); //获取当前年份(2位)

myDate.getFullYear(); //获取完整的年份(4位,1970-????)

myDate.getMonth(); //获取当前月份(0-11,0代表1月)

myDate.getDate(); //获取当前日(1-31)

myDate.getDay(); //获取当前星期X(0-6,0代表星期天)

myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

myDate.getHours(); //获取当前小时数(0-23)

myDate.getMinutes(); //获取当前分钟数(0-59)

myDate.getSeconds(); //获取当前秒数(0-59)

myDate.getMilliseconds(); //获取当前毫秒数(0-999)

myDate.toLocaleDateString(); //获取当前日期

var mytime=myDate.toLocaleTimeString(); //获取当前时间

myDate.toLocaleString( ); //获取日期与时间

2.isNaN() 函数用于检查其参数是否是非数字值。

语法

isNaN(x)

参数	描述
x	必需。要检测的值。

返回值

如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。

说明

isNaN() 函数可用于判断其参数是否是 NaN，该值表示一个非法的数字（比如被 0 除后得到的结果）。

如果把 NaN 与任何值（包括其自身）相比得到的结果均是 false，所以要判断某个值是否是 NaN，不能使用 == 或 === 运算符。正因为如此，isNaN() 函数是必需的。

提示和注释

提示：isNaN() 函数通常用于检测 parseFloat() 和 parseInt() 的结果，以判断它们表示的是否是合法的数字。当然也可以用 isNaN() 函数来检测算数错误，比如用 0 作除数的情况。

实例

检查数字是否非法：

document.write(isNaN(123));

document.write(isNaN(-1.23));

document.write(isNaN(5-2));

document.write(isNaN(0));

document.write(isNaN("Hello"));

document.write(isNaN("2005/12/12"));

</script>

输出：

false

true

8.jquery获取上级、同级和下级元素

1、JQuery.parent(expr)找父亲节点，可以传入expr进行过滤，比如$("#parent").parent() 或者$("#parent").parent(".child")

2、JQuery.parents(expr)查找所有祖先元素，不限于父元素

3、JQuery.children(expr)返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点

4、JQuery.contents()返回下面的所有内容，包括节点和文本。这个方法和children()的区别在于，包括空白文本也会被作为一个JQuey对象返回，children()则只会返回节点

5、JQuery.prev() 返回上一个兄弟节点，不是所有的兄弟节点

6、JQuery.prevAll()返回所有之前的兄弟节点

7、JQuery.next()返回下一个兄弟节点，不是所有的兄弟节点

8、JQuery.nextAll()返回所有之后的兄弟节点

9、JQuery.siblings()返回兄弟姐妹节点，不分前后

jQuery 效果 - 隐藏和显示

jQuery hide() 和 show()

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：

$("#hide").click(function(){

$("p").hide();

});

$("#show").click(function(){

$("p").show();

});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

实例

$("button").click(function(){

$("p").hide(1000);

});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

实例

$("button").click(function(){

$("p").toggle();

});

语法：

$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

js中数据类型分为两大类：基本数据类型和引用数据类型

- 基本数据类型分为：number、string、boolean、null、undefined

- 引用数据类型分为：对象类型、函数，对象类型又分为：Object对象、Array数组、RegExp正则、Date时间对象、Math数学对象

1.基本据类型（6种)数据类型来自于ES版本typeofnull

Null ES5 Object

undefined ES5 undefined

Boolean ES5 boolean

Number ES5 number

String ES5 string

Symbol ES6 symbol

bigint

2.引用数据类型(2种)数据类型来自于ES版本typeof

object ES5 object

Function ES5 function

方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
但是IE不支持用 setAttribute 设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。

方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent，object.attachEvent(event,function)，例如：

复制代码代码如下:

obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}

或者写成 obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener，element.addEventListener(type,listener,useCapture，

复制代码代码如下:

obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}

同样也可写在一起obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on，如 onclick，而 addEventListener 不带 on，如 click。

复制代码代码如下:

考虑兼容性：
if (window.attachEvent)//兼容IE
{
//IE 的事件代码
}
else
{
//其它浏览器的事件代码
}

上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数：

版本一：

复制代码代码如下:

方法三、事件 = 函数
例：obj.onclick = Foo;
这种绑定事件的方式，兼容主流浏览器,但如果一个元素上添加多次同一事件呢?

复制代码代码如下:

obj.onclick=method1;
obj.onclick=method2;
obj.onclick=method3;

1. <input onchange="handle(event)"/>

function handle(e){

console.log(e.target.value)

}

2 const btn = document.querySelector('.btn');

btn.addEventListener('click', () => {

console.log('dianji')

})

3、btn.onclick = function () {

console.log('点')

}

jquey 设置属性及属性值

相对于原生的 javascript 来说，使用 jquery 可以更加方便的获取，以及修改 DIV 元素的属性值.

jquey 中的 attr() 方法可以设置div元素的值，而且可以同时设置多个。

代码：

//设置单个属性

$('#mochu').attr('data-id','1');

//同时设置多个属性

$('#mochu').attr({"data-host":"http://www.feiniaomy.com", "data-time": "20190808" });</script>

复制

jquey 获取DIV元素中的属性的属性值

jquey 中的 attr() 方法不仅可以设置div元素的属性以及属性值，还可获取div元素属性的属性值

代码：

var title = $('#div').attr('title');

console.log(title);</script>

js获取元素的方法

1.根据id获取元素

document.getElementById("id属性的值");

2.根据标签名字获取元素

document.getElementsByTagName("标签的名字");

3.根据name属性的值获取元素

document.getElementsByName("name属性的值");

4.根据类样式的名字获取元素

document.getElementsByClassName("类样式的名字");

5.根据选择器获取元素

1.document.querySelector("选择器");

2.document.querySelectorAll("选择器");

jquery text()和html()的区别

发布时间：2018-01-15 22:00:57

1.text()用来设置或返回被选元素的文本内容。

(1)返回被选元素文本内容

eg:

<p>

</p>

$('p').text();/*返回p元素的文本内容，不包括内容里的标签，只返回:Hi! */

(2)设置该元素的内容，将该元素的全部内容都替代掉。

eg:

<p>

<strong>Hi!</strong> //此时显示的是Hi!(粗体)

</p>

$('p').text('Hello,world!');//p标签的内容将全部被替代，显示为 Hello,world!(包括strong标签也被替代了，所以文本不再是粗体)

$('p').text('<strong>Hello,world!</strong>');//p标签的内容将全部被替代，显示为 Hello,world!(strong标签无效)

2.html()用来返回或设置被选元素内容(等同于原生dom的innerHTML)。

(1)返回被选元素所有内容(包括标签等）

eg:

<p>

</p>

$('p').html();//返回p元素的全部内容，包括内容里的标签，返回:<strong>Hi!</strong>

(2)设置该元素的内容，将该元素的全部内容都替代掉。

eg:

<p>

<strong>Hi!</strong> //此时显示的是 Hi!(粗体)

</p>

$('p').html('Hello,world!');//p标签的内容将全部被替代，显示为 Hello,world!(包括strong标签也被替代了，所以文本不再是粗体)

$('p').html('<strong>Hello,world!</strong>');//p标签的内容将全部被替代，显示为Hello,world!(粗体)(strong标签有效)

3.text()和html()的区别

(1)text()只能返回文本内容，而html()可以返回元素的全部内容

(2)text(str)设置元素内容时，只有文本内容有效，其余内容无效；而html(str)设置元素内容时，所有内容有效(包括标签）

(3)text()返回所有匹配元素的内容，叠加；而html()只返回第一个匹配元素的内容

html()方法获取和设置元素时设置的是HTML代码
text()方法获取和设置元素时设置的是元素的文本内容

js 定时器有以下两个方法：

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

1.setInterval ，按照指定间隔后把回调函数加入任务队列，js会逐个执行,并且会一直执行。

2.setTimeout，在指定的毫秒数后调用函数或计算表达式。

、通过setTimeout模拟的setInterval与setInterval的区别则在于：setTimeout只有在回调完成之后才会去调用下一次定时器，而setInterval则不管回调函数的执行情况，当到达规定时间就会在事件队列中插入一个执行回调的事件，所以在选择定时器的方式时需要考虑setInterval的这种特性是否会对你的业务代码有什么影响？

/清除定时器,

clearTimeout(test1);