Jquery学习笔记
来源：监理师 发布时间：2021-04-12 点击：
Jquery 学习笔记 HIDE 函数 <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("button").click(function(){
$("#test").hide();
}); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p id="test">This is another paragraph.</p> <button type="button">Click me</button> </body> </html>
jQuery 语法实例 $(this).hide()
演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。
$("p").hide()
演示 jQuery 的 hide() 函数，隐藏所有 <p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数，隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数，隐藏 id="test" 的元素。
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取 id="demo" 的第一个 <p> 元素 Remark：.
class 即 CSS；# id
jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href="#"]") 选取所有带有 href 值等于 "#" 的元素。
$("[href!="#"]") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$=".jpg"]") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色：
实例
$("p").css("background-color","red");
jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中：
实例 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
}); </script> </head>
<body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body>
</html>
jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。
jQuery 事件 下面是 jQuery 中事件方法的一些例子：
Event 函数 绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件 $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件 $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 隐藏和显示 通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：
实例 $("#hide").click(function(){ $("p").hide();
}); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
语法：
$(selector).hide(speed,callback)
$(selector).show(speed,callback) speed 参数规定显示或隐藏的速度。可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
jQuery 切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素，显示隐藏的元素。
语法：
$(selector).toggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
实例 $("button").click(function(){ $("p").toggle(); });
jQuery 滑动函数 - slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数：
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例 $(".flip").click(function(){ $(".panel").slideDown(); });
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo() jQuery 拥有以下 fade 函数：
$(selector).fadeIn(speed,callback)
$(selector).fadeOut(speed,callback)
$(selector).fadeTo(speed,opacity,callback) speed 参数可以设置这些值："slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例 $("button").click(function(){ $("div").fadeTo("slow",0.25); });
jQuery Callback 函数 当动画 100% 完成后，即调用 Callback 函数。
典型的语法：
$(selector).hide(speed,callback) callback 参数是一个在 hide 操作完成后被执行的函数。
错误（没有 callback ）
$("p").hide(1000); alert("The paragraph is now hidden"); 亲自试一试 正确（有 callback ）
$("p").hide(1000,function(){ alert("The paragraph is now hidden"); });
jQuery HTML 操作 - 来自本页 函数 描述
$(selector).html(content) 改变被选元素的（内部）HTML $(selector).append(content) 向被选元素的（内部）HTML 追加内容 $(selector).prepend(content) 向被选元素的（内部）HTML “预置”（Prepend）内容 $(selector).after(content) 在被选元素之后添加 HTML $(selector).before(content) 在被选元素之前添加 HTML
jQuery CSS 函数 - 来自本页 CSS 属性 描述 $(selector).css(name,value) 为匹配元素设置样式属性的值 $(selector).css({properties}) 为匹配元素设置多个样式属性 $(selector).css(name) 获得第一个匹配元素的样式属性值 $(selector).height(value) 设置匹配元素的高度 $(selector).width(value) 设置匹配元素的宽度
AJAX 和 jQuery jQuery 提供了用于 AJAX 开发的丰富函数（方法）库。
通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
jQuery AJAX 请求 请求 描述 $(selector).load(url,data,callback) 把远程数据加载到被选的元素中 $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据 $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据 $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据 $.getScript(url,callback) 加载并执行远程的 JavaScript 文件 (url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象 (callback) 当数据被加载时，所执行的函数 (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text) (options) 完整 AJAX 请求的所有键/值对选项
jQuery 选择器 选择器 实例 选取 *
$("*") 所有元素 #id
$("#lastname") id="lastname" 的元素 .class
$(".intro") 所有 class="intro" 的元素 element
$("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class="intro" 且 class="demo" 的元素
:first
$("p:first") 第一个 <p> 元素 :last
$("p:last") 最后一个 <p> 元素 :even
$("tr:even") 所有偶数 <tr> 元素
:odd
$("tr:odd") 所有奇数 <tr> 元素
:eq(index)
$("ul li:eq(3)") 列表中的第四个元素（index 从 0 开始）
:gt(no)
$("ul li:gt(3)") 列出 index 大于 3 的元素 :lt(no)
$("ul li:lt(3)") 列出 index 小于 3 的元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素
:header
$(":header") 所有标题元素 <h1> - <h6> :animated
所有动画元素
:contains(text)
$(":contains("W3School")") 包含指定字符串的所有元素 :empty
$(":empty") 无子（元素）节点的所有元素 :hidden $("p:hidden") 所有隐藏的 <p> 元素 :visible
$("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute]
$("[href]") 所有带有 href 属性的元素 [attribute=value]
$("[href="#"]") 所有 href 属性的值等于 "#" 的元素 [attribute!=value]
$("[href!="#"]") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value]
$("[href$=".jpg"]") 所有 href 属性的值包含以 ".jpg" 结尾的元素
:input
$(":input") 所有 <input> 元素 :text
$(":text") 所有 type="text" 的 <input> 元素 :password
$(":password") 所有 type="password" 的 <input> 元素 :radio
$(":radio") 所有 type="radio" 的 <input> 元素 :checkbox
$(":checkbox") 所有 type="checkbox" 的 <input> 元素 :submit
$(":submit") 所有 type="submit" 的 <input> 元素 :reset
$(":reset") 所有 type="reset" 的 <input> 元素 :button
$(":button") 所有 type="button" 的 <input> 元素 :image
$(":image") 所有 type="image" 的 <input> 元素 :file
$(":file") 所有 type="file" 的 <input> 元素
:enabled
$(":enabled") 所有激活的 input 元素 :disabled
$(":disabled") 所有禁用的 input 元素 :selected
$(":selected") 所有被选取的 input 元素 :checked
$(":checked") 所有被选中的 input 元素
jQuery 事件方法 事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
触发实例：
$("button#demo"). click()
上面的例子将触发 id="demo" 的 button 元素的 click 事件。
绑定实例：
$("button#demo"). click(function(){$("img").hide()})
上面的例子会在点击 id="demo" 的按钮时隐藏所有图像。
方法 描述 bind()
向匹配元素附加一个或更多事件处理器 blur()
触发、或将函数绑定到指定元素的 blur 事件 change()
触发、或将函数绑定到指定元素的 change 事件 click()
触发、或将函数绑定到指定元素的 click 事件 dblclick()
触发、或将函数绑定到指定元素的 double click 事件 delegate()
向匹配元素的当前或未来的子元素附加一个或多个事件处理器 die()
移除所有通过 live() 函数添加的事件处理程序。
error()
触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented()
返回 event 对象上是否调用了 event.preventDefault()。
event.pageX
相对于文档左边缘的鼠标位置。
event.pageY
相对于文档上边缘的鼠标位置。
event.preventDefault()
阻止事件的默认动作。
event.result
包含由被指定事件触发的事件处理器返回的最后一个值。
event.target
触发事件的 DOM 元素。
event.timeStamp
该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type
描述事件的类型。
event.which
指示按了哪个键或按钮。
focus()
触发、或将函数绑定到指定元素的 focus 事件 keydown()
触发、或将函数绑定到指定元素的 key down 事件
keypress()
触发、或将函数绑定到指定元素的 key press 事件 keyup()
触发、或将函数绑定到指定元素的 key up 事件 live()
触发、或将函数绑定到指定元素的 load 事件 load()
触发、或将函数绑定到指定元素的 load 事件 mousedown()
触发、或将函数绑定到指定元素的 mouse down 事件 mouseenter()
触发、或将函数绑定到指定元素的 mouse enter 事件 mouseleave()
触发、或将函数绑定到指定元素的 mouse leave 事件 mousemove()
触发、或将函数绑定到指定元素的 mouse move 事件 mouseout()
触发、或将函数绑定到指定元素的 mouse out 事件 mouseover()
触发、或将函数绑定到指定元素的 mouse over 事件 mouseup()
触发、或将函数绑定到指定元素的 mouse up 事件 one()
向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()
文档就绪事件（当 HTML 文档就绪可用时）
resize()
触发、或将函数绑定到指定元素的 resize 事件 scroll()
触发、或将函数绑定到指定元素的 scroll 事件 select()
触发、或将函数绑定到指定元素的 select 事件 submit()
触发、或将函数绑定到指定元素的 submit 事件 to...
推荐访问:学习笔记 jquery推荐文章