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.没有数组的特别方法