目录

jQuery简单笔记

目录

jQuery 是一个 JavaScript 库,简化了 JavaScript 的编程。

语法:$(selector).action()

selector 是字符串,表示HTML元素。

对象符号例子效果
当前整个HTMLthisthis选择整个HTML
标签标签名“p”选择所有<p>元素
id#“#test”选择所有 id = “test"的元素
class.“.test”选择所有 class = “test"的元素
链接[][href=“test”]选择所有 href 等于 “test"的元素
[href!=“test”]选择所有 href 不等于 “test"的元素
[href$=“test”]选择所有 href 以 “test” 结尾的元素
表格ul li:“ul li:first”选择每个 <ul> 的第一个 <li> 元素

以上三者可以合起来用:$(“p#test.test”)

action()列表:

隶属名称功能
documentready(function)HTML文档加载完毕时执行function
window浏览器视口
所有元素hide()隐藏所选元素
show()显示所选元素
toggle()以上两者切换
fadeIn()渐渐隐藏
fadeOut()渐渐显示
fadeToggle()以上两者切换
slideUp()向上滑动隐藏元素
slideDown()向下滑动显示元素
slideToggle()以上两者切换
addClass()添加一个或多个类
removeClass()删除一个或多个类
toggleClass()以上两者切换
mouseover(function)鼠标悬停在元素上时执行function
focus(function)元素获得焦点时执行function
click(function)点击元素时执行function
dblclick(function)双击元素时执行function
attr()改变元素的属性
css()改变或返回元素的css属性
animate({dict参数})执行动画以使元素符合参数指定内容(属性名用骆驼命名法)
stop(bool,bool)停止动画
text()设置或返回所选元素的文本内容
html()设置或返回所选元素带 HTML 标记的内容
val()设置或返回表单字段的值
append(string)元素内容结尾添加
after(string)元素结束之后添加
remove()删除整个元素
empty()删除子元素
width()不包括 padding 和 border
height()不包括 padding 和 border
innerWidth()包括 padding
innerHeight()包括 padding
outerWidth()包括 padding 和 border
outerHeight()包括 padding 和 border

当出现动画动作时,可以传入两个参数:

  • 毫秒表示动作过渡时长。
  • 回调,在动画完成后执行

可在数值前使用 += 和 -= 表示相对值。

在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。

AJAX:
load()
get()
post()