jQuery

最新推荐文章于 2020-10-12 21:08:55 发布

原创最新推荐文章于 2020-10-12 21:08:55 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

javascript 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了jQuery库中的关键功能，包括元素显示与隐藏、淡入淡出效果、滑动动画、HTML内容操作、CSS属性控制、元素尺寸管理及元素遍历等。此外还涉及了筛选、过滤、AJAX数据交互等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式

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);
  });
});