JQuery了。。。

来源：互联网发布：数据分组分析法案例编辑：程序博客网时间：2024/04/30 13:51

简介：

Query库包含以下功能：

HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities

安装：

直接引用吧。谷歌：<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script></head>

语法：

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action() 美元符号定义jQuery; 选择符（selector）"查询"和"查找" HTML 元素;jQuery 的 action() 执行对元素的操作。

$(this).hide() - 隐藏当前元素；$("p").hide() 隐藏所有段落$；("p .test").hide() 隐藏所有 class="test" 的段落；$("#test").hide() 隐藏所有 id="test" 的元素。

$(document).ready(function()与它相同：$(function()简介的写法。

也可以独立使用。<script src="my_jquery_functions.js"></script>

事件：

语法：$("p").click();

常用事件：$(document).ready()

click()click() 方法是当按钮点击事件被触发时会调用一个函数。

dblclick()当双击元素时，会发生 dblclick 事件。

mouseenter()当鼠标指针经过元素时，会发生 mouseenter事件。

mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()hover()方法用于模拟光标悬停事件。

focus()当元素获得焦点时，发生 focus 事件。

blur()当元素失去焦点时，发生 blur事件。

效果：

可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。$(selector).hide(speed（隐藏的速度）,callback);$(selector).show(speed,callback);

jQuery toggle()来切换 hide() 和 show() 方法。$(selector).toggle(speed,callback);

淡入淡出：fadeIn\fadeOut\fadeToggle\ fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

滑动：slideDown\slideUp\slideToggle

动画：animate语法$(selector).animate({params},speed,callback);也可以多个属性操作。也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：eg：height:'+=150px'

stop停止动画。

callback例子要一看。

chaining允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

jQuery html

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

alert("" + $("#test").text()

回调

添加元素：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
function appendText()
{
var txt1="<p>Text.</p>"; // Create text with HTML
var txt2=$("<p></p>").text("Text."); // Create text with jQuery
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // Create text with DOM
$("body").append(txt1,txt2,txt3); // Append new elements
}

删除元素：

remove/empty注意两者的区别。empty是删除选中元素的子元素。

$("p").remove(".italic");一个过滤例子的语法。

操作css：

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

addClass() - 向被选元素添加一个或多个类例子是由于p和h均没有类，可以给他们加上类然后应用css。
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

css("propertyname","value"); 例子语法： $("p").css("background-color");

css({"propertyname":"value","propertyname":"value",...});

jQuery尺寸：

遍历：

向上：

parent()
parents()
parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。

向下：

children()
find()找到指定所有后代

左右：

siblings()返回被选元素的所有同胞元素
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

过滤：

first() 方法返回被选元素的首个元素

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回

not() 方法与 filter() 相反。

Ajax:

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。异步 JavaScript 和 XML.

Query load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

回调函数（callback）可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。$.get(URL,callback);

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。$.post(URL,data,callback);

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。这样就避免了也是用$简写的框架。

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

0 0