JQuery基础

版权声明:自由转载-非商用-保持署名、出处 https://blog.csdn.net/qq_34984929/article/details/79768488

入口函数

$(document).ready(function(){
    // 事件不带on
    $("#btn").click(function(){;} 
})  // 效率大于JS的window.onload事件

1 效果

隐藏/显示
  • hide()
  • show()
  • toggle() 切换
淡入淡出
  • fadeIn() 淡入已隐藏的元素
$(selector).fadeIn([speed][,callback]);
  • fadeOut() 淡出
  • fadeToggle() 切换
  • fadeTo() 允许渐变为给定的不透明度(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);
滑动
  • slideDown()
  • slideUp()
  • slideToggle()
动画
  • animate()
$(selector).animate({params}[,speed][,callback]);
stop()
$(selector).stop([stopAll][,goToEnd]);
  • stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行
  • goToEnd 参数规定是否立即完成当前动画。默认是 false
Callback
Chaining 执行多个动作、方法
$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

2 HTML

获取
  • text() 设置或返回所选元素的文本内容
  • html() 设置或返回所选元素的内容(包括 HTML 标记)
  • val() 设置或返回表单字段的值
  • attr() 获取属性值
设置
// 设置文本
$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});

// 设置指定属性
$("button").click(function(){
  $("#test2").attr("href","http://www.zhanghyingji.cn/");
});
添加
  • append() 结尾插入
  • prepend() 开头插入
  • after() 之后插入
  • before() 之前插入
删除
  • remove() 迭代删除元素
  • empty() 删除子元素
// 删除 class="italic" 的所有 <p> 元素
$("p").remove(".italic");
CSS
  • addClass()
  • removeClass()
  • toggleClass()
  • css()
$("p").css("background-color","yellow");
尺寸
  • width() 设置或返回元素的宽度(不包括内边距、边框或外边距)
  • heigth()
  • innerWidth() 返回元素的宽度(包括内边距)
  • innerHeight()
  • outerWidth() 返回元素的宽度(包括内边距和边框)
  • outerHeight()

3 遍历

父元素
  • parent() 返回父元素
  • parents() 返回所有祖先
  • parentsUntil()
// 返回介于 <span> 与 <div> 元素之间的所有祖先元素
$(document).ready(function(){
  $("span").parentsUntil("div");
});
子元素
  • children() 返回所有直接子元素
  • find() 迭代返回子元素
兄弟元素
  • siblings() 返回被选元素的所有兄弟元素
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
过滤
  • first()
  • last()
  • eq()
  • filter()
  • not()

4 AJAX

load()加载

$(selector).load(URL[,data][,callback])

get() && post()
  • $.get(URL[,callback]);
$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
  • $.post(URL[,data][,callback])
$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});
阅读更多
换一批

没有更多推荐了,返回首页