jQuery设计思想

简介: jQuery设计思想

jQuery的基本设计思想和主要用法,就是选择某个网页元素,然后对其进行某种操作 。


本文会讲解到以下知识点


  • jQuery 如何获取元素
  • jQuery 的链式操作是怎样的
  • jQuery 如何创建元素
  • jQuery 如何移动元素
  • jQuery 如何修改元素的属性


jQuery 如何获取元素


jQuery的第一种设计思想就是获取元素

jquery的第一步就是先获取元素


$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素


jQuery 的链式操作是怎样的


链式操作:每次方法执行完后返回this对象,同一个对象进行不同的操作可以连接起来

$('div').find('h3').eq(2).html('Hello');

分解后等同于:

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

这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作,返回的都是一个jQuery对象,所以不同操作可以连在一起。


jQuery 如何创建元素


jQuery的第二种设计思想就是创建元素

创建元素,只要把新元素直接传入jQuery的构造函数就行了

$('<p>Hello</p>')
$('<li class="new">new list item</li>')
$('ul').append('<li>list item</li>')

jQuery 如何移动元素


jQuery的第三种设计思想就是元素的移动

第一种方法是使用.insertAfter(),把div元素移动p元素后面:

$('div').insertAfter($('p'));

第二种方法是使用.after(),把p元素加到div元素前面:

  $('p').after($('div'));

表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。

一共有四对操作方法:

 .insertAfter()和.after():在现存元素的外部,从后面插入元素
  .insertBefore()和.before():在现存元素的外部,从前面插入元素
  .appendTo()和.append():在现存元素的内部,从后面插入元素
  .prependTo()和.prepend():在现存元素的内部,从前面插入元素

jQuery 如何修改元素的属性


修改元素的属性也有两种方法

一是在一个类里写好各种属性,把类名添加上去:

$('div').addClass('red')

第二种是常见的取值和赋值函数

.html() //取出或设置html内容
.text() //取出或设置text内容
.attr() //取出或设置某个属性的值
.width() //取出或设置某个元素的宽度
.height() //取出或设置某个元素的高度
.val() //取出某个表单元素的值

具体请查看阮一峰的: jQuery的设计思想

目录
相关文章
|
5月前
|
XML 缓存 JavaScript
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
jQuery 第十章(jQuery AJAX以及jQuery和其他框架兼容)
26 0
|
11月前
|
JavaScript 前端开发 API
前端|Zepto与jQuery的异同
前端|Zepto与jQuery的异同
57 0
|
JavaScript 前端开发 API
jQuery——jQuery基本概念
jQuery——jQuery基本概念
156 0
jQuery——jQuery基本概念
|
JavaScript 前端开发 程序员
【JQuery框架】超详细DOM操作看这一篇就够了!
【JQuery框架】超详细DOM操作看这一篇就够了!
275 0
【JQuery框架】超详细DOM操作看这一篇就够了!
|
JavaScript 前端开发 数据格式
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 ...
956 0
|
JavaScript 前端开发 API
jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象。 7.1 创建DOM节点 使用JavaScript原生方式创建DOM节点并添加到页面中的代码示例: 1 //01 创建DOM节点 2 var oDiv = document.
1113 0
|
JavaScript 前端开发
jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动。虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框架增加并扩展了基本的事件处理机制,jQuery框架提供了更加优雅的事件处理语法,并极大的增强了事件处理能力。
1091 0
|
前端开发 JavaScript 索引
jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎。它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选 择,而且不必担心浏览器的兼容性,写法更加简洁。
956 0
jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQuery框架还支持自定义各种动画效果。
936 0
|
JSON JavaScript 前端开发
jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求、接收服务器端的响应以及执行回调等操作都是通过XMLHTTPRequest对象来完成的。
1313 0

相关实验场景

更多