jQuery简单入门

108 阅读2分钟

简介

jQuery是一个封装好的JavaScript库,而且是目前最长寿的JavaScript库之一。它简化了我们的dom操作,以及dom api的兼容性。同时也提供了一些方法。

功能

选择器(获取元素)

$(document) //选择整个文档
$('#xxx')   //选择ID为xxx的元素
$('.yyy')   //选择class为yyy的元素
$('input[name=first]')  //选择name属性为first的input元素

创建元素

我们可以定义一个变量,然后将一个标签赋值给它,再根据需要将它插入到dom中。让它成为某个元素的兄弟,儿子,父亲等关系。

元素移动

jQuery提供两类方法。

append() //将内容插入匹配参数的后面的内部作为儿子节点
prepend()  //将内容插入匹配参数的前面的内部作为儿子节点
appendTo()  //将参数插入匹配内容后面的内部作为儿子节点
prependTo()  ////将参数插入匹配内容前面的内部作为儿子节点
//没有To表示参数是要插入的内容,有To表示插入的内容在方法前面。
.after()  //将参数作为将要插入的内容插入到选择表达式的后面作为兄弟元素
.before()  //将参数作为将要插入的内容插入到选择表达式的前面作为兄弟元素
.insertAfter()  //将选择表达式的内容插入到匹配参数的后面作为兄弟元素
.insertBefore()  ////将选择表达式的内容插入到匹配参数的前面作为兄弟元素

修改元素属性

设置性常用方法

.attr() 
.prop()
.removeAttr()
.removeProp()

//设置css属性
.css()
.position()
.height()
.width()
.innerHight()
.innerWidth()
.outterHight()
.outterWidth()

设计思想

  • 思想就是选择元素,然后对其操作
  • 链式操作,调用函数后会再返回操作jQuery的对象,然后就不断的调用。形成链式操作
  • \$操作符,其实就是window.$ = window.jQuery

其它

  • jQuery对象不是完全的对象,但是它具有一部分对象的特点,所以一般叫它jQuery对象
  • jQuery虽然已经过时,但其中的一些思想并未过时,我们仍可以借鉴