jQuery入门:掌握基本操作技巧

发表时间: 2024-04-23 21:51

1 jQuery操作

1.1 引入jQuery

要使用jQueryjavascript库,只需要将jQuery 对应的“jquery-x.x.js”脚本文件引入到页面中即可。

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

1.2 常用基础方法

1.2.1 初始事件

在未使用jQuery之前;在页面中常常需要用到window.onload来初始化一些元素事件。引入jQuery之后,它也对应有类似方法:ready;当DOM载入就绪可以查询及操纵时绑定一个要执行的函数;该方法是对向window.load事件注册事件的替代。两种写法:

写法一:直写

$(document).ready(function(){

// 在这里写你的代码...

});


写法二:$(document).ready() 的简写

$(function() {

// 你可以在这里继续使用$作为别名...

});


1.2.2 基本选择

用法

描述

$(“#elementID”)

#表示根据id查找;查找id为elementID的元素;建议的用法。所以一般推荐给标签设置ID。

类似:

document.getElementById("elementID") 但两者之间返回类型不同


$(“.className”)

.表示根据class样式名称查找;查找样式名称为className的所有标签


$(“input”)

查找所有input标签


1.2.3 基本取/设值

用法

描述

$(“#elementID”).val()

$(“#elementID”).val(“新值”)


分别表示取值和设置值

$(“#elementID”).html()

$(“#elementID”).html(“新值”)


分别表示获取标签内部的html文本内容和设置html文本内容。类似innerHTML

$(“#elementID”).text()

$(“#elementID”).text(“新值”)


分别表示获取标签内部的纯文本内容和设置纯文本内容。

$(“#elementID”).attr(“name”)

$(“#elementID”).attr(“name”,”itcast”)


attr为获取对应属性的值或设置对应属性的值。如果遇上具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 则使用prop()


1.2.4 基本访问与工具

用法

描述

empty()


删除匹配的元素集合中所有的子节点。

each()

以每一个匹配的元素作为上下文来执行一个函数;每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素。


jQuery.each()

通用例遍方法,可用于例遍对象和数组


jQuery.trim()

去掉字符串起始和结尾的空格。

$.trim(" hello, how are you? ");去掉字符串起始和结尾的空格。


focus()

定焦或当元素获得焦点时,触发 focus 事件