您好,欢迎访问一九零五行业门户网

jquery的主要功能有哪些

jquery的主要功能有:1、访问页面框架的局部;2、修改页面的表现;3、更改页面内容;4、响应事件;5、为页面添加动画;6、与服务器异步交互;7、简化常用的javascript操作。
本教程操作环境:windows10系统、jquery3.2.1、dell g3电脑。
jquery的主要功能有哪些?
jquery的主要功能
1:访问页面框架的局部
jquery大大简化了dom获取页面某个节点或者某一类节点的固定方法;
2:修改页面的表现
由于各个浏览器对css3标准的支持不同,是的很多css3的样式风格没能很好的体现。jquery的出现很好的解决了这个问题。它通过封装好的javascript代码,是的各种浏览器能很好的使用css3标准。
3:更改页面内容
通过强大而方面的api,jquery可以很方便的修改页面的内容,甚至整个页面的框架;
4:响应事件
不需要在考虑浏览器的兼容性问题,可以更加轻松的处理事件;
5:为页面添加动画
jquery的库提供了大量可自定义参数的动画效果,
6:与服务器异步交互
jquery提供了一整套ajax相关的操作,大大方便了异步交互的开发和使用;
7:简化常用的javascript操作
jquery提供了很多附加的功能来简化常用的javascript操作,例如数组的操作,迭代运算等;
jquery 的基本功能
jquery 封装了 dom 功能,让 dom 函数的使用变得十分简洁方便。无论是对网页元素的获取还是“增删改查”都进行了更加人性化的封装。下面让我们简单了解一下 jquery 的基本功能以及 jquery 设计的优秀之处。
一、获取网页元素
jquery 获取的结果是一个对象
一些基本方法
$(document); // 选择整个文档对象$("#myid"); // 选择id = 'myid' 的元素$(".myclass"); // 选择class = 'myclass' 的元素$("div.myclass"); // 选择class = 'myclass' 的div元素$("input[name=first]"); // 选择name = 'first' 的 input 元素
jquery 特有的表达式
$("a:first"); // 选择网页中第一个a元素$("tr:odd"); // 选择表格中的奇数行$("#myfrom:input"); // 选择表单中的id='myfrom'的input元素$("div:visible"); // 选择可见的div元素$("div:gt(2)"); // 选择所有的div元素,除了前3个$("div:animated"); // 选择当前处于动画状态的div元素
进一步过滤对 div 的选择结果对象
$("div").has("p"); // 选择包含p元素的div元素$("div").not(".myclass"); //选择class != 'myclass' 的div元素$("div").filter(".myclass"); // 选择class = 'myclass' 的div元素$("div").first(); // 选择第1个div元素$("div").eq(5); // 选择第6个div元素
通过 div 选择其他元素
$("div").next("p"); // 选择div元素后面的第1个p元素$("div").parent(); // 选择div元素的父元素$("div").closest("from"); // 选择离div最近的from父元素$("div").children(); // 选择div的所有子元素$("div").siblings(); // 选择div同级的其他兄弟元素(不包括自己)
二、链式操作
jquery 最令人称道的部分
jquery 可以对同一对象进行连续函数操作
举例:
$("div").find("p").addclass("first").removeclass("second").html("third");// 分解$("div") // 找到div元素 .find("p") // 选择其中的p元素 .addclass("first") // 添加一个class = 'first' .removeclass("second") // 删除一个class = 'second' .text("third"); // 将文本改为 third
链式操作是 jquery 最方便的特点,因为 jquery 每次执行一个函数操作的返回值还是原来操作的 jquery 对象,所以可以直接在后面继续操作。
.end() 方法
.end() 方法,使返回值结果退到上一个 jquery 对象
举例:
$("div") // 找到div元素 .find("p") // 选择其中的p元素 .addclass("first") .removeclass("second") .text("third") .end() // 将jquery对象从p退回到div .addclass("mydiv"); // 给div添加一个class = 'mydiv'
三、增删改查
1. 增
创建新元素:直接在 jquery 直接传入符合 html 格式的字符串
let $mydiv = $("<div class='mydiv'><p>derek</p></div>"); // 创建新的元素,用变量$mydiv储存$("body").append($mydiv); // 把$mydiv储存的新元素插入到body中$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中
复制元素
.clone()
返回当前 jquery 对象的一个克隆副本
包括所有匹配元素、匹配元素的下级元素、文字节点
2 个参数:
withdataandevents 是否同时复制元素的数据和绑定事件,默认 false
deepwithdataandevents 是否同时复制元素所有子元素的数据和绑定事件,默认值为第 1 个参数(withdataandevents)的值
2. 删
删除元素
.remove() 不保留被删元素的事件.detach() 保留被删元素的事件,便于在重新插入文档时使用.empty() 清空元素内容,但不删除该元素(即删除元素里面的所有节点)
3. 改
插入/移动元素
$("div").insertafter($("p")); // 把div元素移动到p元素的后面$("p").after($("div")); // 把p元素移动到div元素的前面
上述两种方法的效果是一样的
但是它们的返回值是不同的,分别是$('div')和$('p'),所以需要根据后续的操作来进行选择
另外两种插入/移动元素的方法
// 在div内部的 末端 插入内容$("div").append("插入的部分");$("插入的部分").appendto("div");// 在div内部的 顶端 插入内容$("div").prepend("插入的部分");$("插入的部分").prependto("div");
4. 改查合一 getter/setter
同一函数,通过传参的不同来实现改/查功能
$("h1").html(); // html没有传参,实现取出h1的值$("h1").html("hello"); // html传参'hello',实现对h1进行赋值
jquery 常见取值/赋值函数
.html() 查/改 html 内容
.text() 查/改 text 内容
.attr() 查/改 某个属性的值
.width() 查/改 某个元素宽度
.heigth() 查/改 某个元素高度
.val() 查/改 某个表单元素的值
注意:
如果结果对象包含多个元素,那么赋值时,将对其中所有的元素赋值
取值时,则是只取出第一个元素的值
.text()例外,它取出所有元素的 text 内容
推荐学习:《jquery视频教程》
以上就是jquery的主要功能有哪些的详细内容。
其它类似信息

推荐信息