jQuery的基础功能

2021-04-13  本文已影响0人  茜Akane

Get started

获取元素

使用jQuery,要先选取一个选择表达式(可以是整个文档、元素、jQuery特有的表达式),来获取对其操作的对象。

$(document)  //选择整个文档对象
$('#myId')  //选择ID为myId的网页元素
$('div.myClass')  // 选择class为myClass的div元素,div可省略
$('a:first')  //选择网页中第一个a元素

闭包&链式操作

闭包:函数内部的子函数能够读取其他函数内部变量,这种方式叫做闭包。利用js函数的作用域,来隐藏变量,防止随意修改。
原理:jQuery函数的返回了jQuery对象,使其返回值可以继续使用其内部函数,通过这种操作实现了jQuery的链式操作。

// $('div').find('h3').eq(2).html('Hello'); // 同下
$('div') //找到div元素
 .find('h3') //选择其中的h3元素
 .eq(2) //选择第3个h3元素
 .html('Hello'); //将它的内容改为Hello

创建元素

直接输入元素。

$("<div>不相关数据</div>")
$("<p>不相关数据</p>")

移动元素

操作作元素在网页中的位置移动。

$('div').after('p') //把p元素放到div元素后面
$('div').insertAfter('p') //把div元素放到p的后面

修改元素

$('div').addClass("red") //给div元素添加类名red
$('div').attr("title", "hello world") //给div元素添加title属性

复制和删除元素

复制元素使用.clone()
删除元素使用.remove().detach()。两者的区别在于,前者不保留被删除元素的事件,后者保留,有利于重新插入文档时使用。
清空元素内容(但是不删除该元素)使用.empty()
jQuery中文文档https://www.jquery123.com/
原文文档https://api.jquery.com/

上一篇下一篇

猜你喜欢

热点阅读