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/