jQuery 实例总结

作者: hx永恒之恋 | 来源:发表于2016-12-13 15:23 被阅读36次

jQuery 语法实例

$(this).hide()
演示 jQuery 的 hide() 函数,隐藏当前的 HTML 元素。
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){
<code> $(this).hide()
});
});`
</script>
</head>


<body>
<button type="button">Click me</button>
</body>


</html>
</code>

$("p").hide()
演示 jQuery 的 hide() 函数,隐藏所有 < p> 元素。
$(".test").hide()
演示 jQuery 的 hide() 函数,隐藏所有 class="test" 的元素。
$("#test").hide()
演示 jQuery 的 hide() 函数,隐藏 id="test" 的元素。

例子解释

Hiding - Sliding- Fading

jQuery fadeOut()
演示简单的 jQuery fadeout() 函数(按时间淡出)。
jQuery hide()
演示简单的 jQuery hide() 函数。
Hide explanations
演示如何隐藏部分文本。

$(document).ready(function(){
  $(".ex .hide").click(function(){
    /* 在类名为ex的div中,点击其中一个类名为hide的元素,
       则隐藏该div视图,另一个同样包含类名为hide元素的
       div不受影响,除非也被点击。*/
    $(this).parents(".ex").hide("slow");
  });
});

Slide panel
演示简单的 Slide Panel 效果。

$(document).ready(function(){
  $(".flip").click(function(){ // 点击类名为filp的元素(点击奇数次展开,偶数次收缩)
     $(".panel").slideToggle("slow"); // 向下展开显示类名为panel的元素
  });
});

jQuery animate()
演示简单的 jQuery animate() 函数。

例子解释

HTML 操作
改变 HTML 元素的内容

$("p").html("W3School");

向 HTML 元素追加内容
在 HTML 元素之后追加内容
例子解释

CSS 操作
改变 HTML 元素的 CSS 属性
改变多个 CSS 属性
获得元素的 CSS 属性
例子解释

AJAX 和 jQuery
使用 $(selector).load(url) 来改变 HTML 内容
使用 $.ajax(options) 来改变 HTML 内容
例子解释

相关文章

  • jQuery 实例总结

    jQuery 语法实例 $(this).hide()演示 jQuery 的 hide() 函数,隐藏当前的 HTM...

  • jQuery 源码解析——无new构建实例和extend方法

    无 new 构建实例 $ 是 jQuery 的别称,$() 是创建 jQuery 的实例对象 jQuery 选择一...

  • jQuery学习记录

    jQuery的引入 一.jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函...

  • jQuery

    jQuery 语法实例 $(this).hide()演示 jQuery hide() 函数,隐藏当前的 HTML ...

  • jQuery记录

    jQuery 语法实例 $(this).hide()演示 jQuery hide() 函数,隐藏当前的 HTML ...

  • Jquery实例

    作者:烨竹 源码去git上下载:https://github.com/keyesone66/Jquery.git ...

  • jQuery实例

    题目1:如何判断一个元素是否出现在窗口可视范围(浏览器的上边缘和下边缘之间,肉眼可视)。写一个函数 isVisib...

  • jQuery和JS中的添加节点方法

    jQuery append() 方法 jQuery append() 方法在被选元素的结尾插入内容。 实例 $("...

  • 第八周第五天笔记

    1 jQuery中的each及map each()$().each(callback):jQuery实例的each...

  • JQuery写拓展

    基础 $.extend()扩展JQuery静态方法,$.fn.extend()扩展JQuery实例方法静态方法: ...

网友评论

    本文标题:jQuery 实例总结

    本文链接:https://www.haomeiwen.com/subject/uetbmttx.html