jQuery的核心函数

理解

简称:jQuery函数($/jQuery)
得到jQuery函数:引入jQuery库后,直接使用$即可
它既可作为一般函数调用,且传递的参数类型不同/格式不同功能就完全不同,也可作为对象调用其定义好的方法, 此时$就是一个工具对象。

作为函数调用:$(param)(详查文档)

(1)参数为函数:当DOM加载完成后,执行此回调函数
(2)参数为选择器字符串:查找所有匹配的标签,并将它们封装为jQuery对象
(3)参数为DOM对象:将dom对象封装成jQuery对象
(4)参数为html标签字符串(用得少):创建标签对象并封装成jQuery对象

作为对象使用:$.xxx()(详查文档)

(1)$.each():遍历数组
(2)$.trim():去除字符串两端的空格

jQuery的核心对象

理解

简称:jQuery对象
得到jQuery对象:执行jQuery函数返回的就是jQuery对象
命名:jQuery对象变量名前加一个$,表明它是一个jQuery对象

jQuery对象是一个包含所有匹配的任意多个DOM元素的伪数组对象(可能只有一个元素)

jQuery对象拥有很多有用的属性和方法, 让程序员能方便的操作DOM

今日所用到的方法属性

绑定文档加载完成的监听,文档:核心API------>jQuery()------>jQuery(callback)

$(function() {
})

按照id 查找元素,文档:核心API------>jQuery()------>jQuery( selector [, context ] )

$("#id")

绑定点击事件监听,文档:事件------>鼠标事件------>.click()

$("#id").click(function()  {
})

文本框的值,文档:表单------>.val()

$("#username").val()

将html标签添加至元素末尾,文档:核心API------>jQuery()------>jQuery( html [, ownerDocument ] )

$('
').appendTo("div")

遍历数组,文档:工具类------>jQuery.each()

$.each([2, 4, 7], function(i, n) {
           console.log(i, n)
})

去除字段两端的空格,文档:工具类------>jQuery.trim()

console.log("------"+$.trim(" 我是尹杰     ")+"---------")

输出jQuery对象的长度即包含的DOM元素的个数,文档:jQuery 对象实例的属性------>.length

var $buttons = $("button")

console.log($buttons.length)

得到对应位置的DOM元素,文档:DOM元素方法------>.get()

console.log($buttons[1].innerHTML, $buttons.get(1).innerHTML)

遍历jQuery对象,文档:遍历------>.each()

$buttons.each(function(index, domElements) {

  console.log(index, domElements.innerHTML)

})

$buttons.each(function() {

  console.log(this.innerHTML)

})

得到下标,文档:DOM元素方法------>.index()

console.log($("#btn3").index())

补充:伪数组

1.Object对象

2.有Length属性

3.有数值下标属性

4.没有数组的特别方法