jQuery

来源：互联网发布：mac右键没有剪切编辑：程序博客网时间：2024/06/13 21:23

样式

1. 显示隐藏（横向出现）
语法：

$(selector).hide(speed,callback);   //$(selector).show(speed,callback);$(selector).toggle(speed,callback);

2. 淡入淡出

$(selector).fadeIn(speed,callback)$(selector).fadeOut(speed,callback);$(selector).fadeToggle(speed,callback);$(selector).fadeTo(speed,opacity,callback);

3.滑动
语法
(selector).slideDown(speed,callback);(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
实例

HTML

1. 获取设置
语法

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

添加HTML

•   append() - 在被选元素内结尾插入•   prepend() - 在被选元素内开头插入•   after() - 在被选元素后插入•   before() - 在被选元素前插入

实例

•   var txt1="<p>Text.</p>";               // 以 HTML 创建新元素•   var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素•   var txt3=document.createElement("p");  // 以 DOM 创建新元素•   txt3.innerHTML="Text.";•   $("p").append(txt1,txt2,txt3);         // 追加新元素

删除

•   remove() - 删除被选元素及其子元素（用选择器筛选）•   empty() – 删除被选元素的子元素  筛选：$("p").remove(".italic");

CSS

•   addClass() - 向被选元素添加一个或多个类•   removeClass() - 从被选元素删除一个或多个类•   toggleClass() - 对被选元素进行添加/删除类的切换操作•   $("#div1").addClass("important blue");

css() 方法设置或返回被选元素的一个或多个样式属性。css({"propertyname":"value","propertyname":"value",...});

尺寸

•   width()设置或返回元素的宽度（不包括内边距、边框或外边距）。height()•   innerWidth()返回元素的宽度（包括内边距）。•   innerHeight()•   outerWidth()返回元素的宽度（包括内边距和边框）•   outerHeight()•   outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。•   outerHeight(true)

遍历
祖先

•   parent()返回被选元素的直接父元素。•   parents()返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)，可用选择器筛选•   parentsUntil()返回介于两个给定元素之间的所有祖先元素，用选择器筛选（不含）

后代

•   children()返回被选元素的所有直接子元素，可用选择器筛选•   find()返回被选元素的后代元素，一路向下直到最后一个后代，可用选择器筛选，全部为“*”

同胞

•   siblings()返回被选元素的所有同胞元素，可用选择器筛选•   next()返回被选元素的下一个同胞元素•   nextAll()返回被选元素的所有跟随的同胞元素，可用选择器筛选•   nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素•   prev()•   prevAll()•   prevUntil()

过滤

first() 方法返回被选中元素中的首个元素。last() 方法返回被选中元素中的最后一个元素eq() 方法返回被选中元素中带有指定索引号的元素，从0开始filter(选择器)  返回匹配的元素。not(选择器)   方法返回不匹配标准的所有元素。

AJAX
load() 方法从服务器加载数据，并把返回的数据放入被选元素中，可用选择器
语法：$(selector).load(URL,data,callback);
• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequ

(“button”).click(function(){(“#div1”).load(“demo_test.txt”,function(responseTxt,statusTxt,xhr){
if(statusTxt==”success”)
alert(“外部内容加载成功！”);
if(statusTxt==”error”)
alert(“Error: “+xhr.status+”: “+xhr.statusText);
});
});() 方法
语法：$.get(URL,callback);

$("button").click(function(){  $.get("demo_test.asp",function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

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

必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据：
实例

$("button").click(function(){  $.post("demo_test_post.asp",  {    name:"Donald Duck",    city:"Duckburg"  },  function(data,status){    alert("Data: " + data + "\nStatus: " + status);  });});

阅读全文

0 0