一个弟弟关于jQuery的记录

576 阅读2分钟

前提:jQuery是一套跨浏览器,多功能,可扩展的JavaScript库。jQuery受欢迎主要是因为有一下这些特色:

  • (1)强大的兼容处理,消除了浏览器之间的差异
  • (2)简洁的链式语法,结合函数式编程技巧就能用少量的代码完成一系列的功能
  • (3)元素操作法多样化,可对文档中的元素进行查找,读写属性,控制样式,注册事件等操作
  • (4)可以快速实现Ajax,动画,浏览器嗅探,函数式编程等功能
  • (5)良好的扩展性,吸引了很多开发者为其设计插件

jQuery是如何获取元素的呢?

jQuery如何获取页面元素?

$("#test"):获取id为test的元素集
$(".red"):获取class为red的元素集

jQuery的链式调用

jQuery对象中的方法会尽可能返回对象本身,因此可实现简洁的链式调用,举个栗子:先找到id属性为“btn”的目标元素(即要匹配的元素),再为其父元素添加一个CSS类,最后返回该父元素中的HTML内容

$("#btn".parent().addClass("container").html();

jQuery对元素的操作

在jQuery中,可以用很简单的方式创建一个或多个元素(通过调用$()函数来实现),其他诸如插入,查找,删除和复制等操作,也很容易实现。

1:查找方法:

传递CSS选择器字符串给()函数,就能匹配到目标元素,此功能和Document对象中的querySelectorAll()方法类似。但()能够兼容所有浏览器,并且还扩展了已有的选择器,例如引入了:button,:checkbox等独有的表单选择器,返回的jQuery对象比Nodelist也强大很多

选择器 描述 选择器 描述
:button 匹配按钮元素 :image 匹配图像元素
:checkbox 匹配复选框元素 :text 匹配文本框元素
:radio 匹配单选框元素 :selected 匹配选择框中选中的选项元素
:file 匹配上传按钮元素

2:插入方法

jQuery提供了多个方法在某个位置插入指定的内容。 jQuery对象中的append()方法可将指定的内容插入到目标元素的子元素列表的末尾处,另一个appendTo()方法也能实现相同的插入操作,只是采用的方式不同,如下面的代码,append()中的目标元素在前,要插入的元素灾后,可称其为前置方式。而appendTo()中的目标元素在后,要插入的的内容在前,可称其为后置方式。

$("#target").append("<p>插入的内容</p>");
$("<p>插入的内容</p>").appendTo("#target")

1:修改元素

创建元素直接用jQuery构造函数就行了

$('<h1>Hello</h1>')

元素的属性

通过jQuery对象不但能够改变文档的结构,还能获取和设置元素的属性,特性,尺寸,坐标,样式,关联的数据以及表单中空间的值。