Javascript学习笔记（十五）--jQuery教程

2017-10-16  本文已影响0人  五秋木

通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。

1. 引用

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>

2. jQuery 描述

主要的 jQuery 函数是 $() 函数，向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。
jQuery 允许您通过 CSS 选择器来选取元素。
例如：

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

等价于

function myFunction()
{
$("#h01").html("Hello jQuery");
## $("#h01").attr("style","color:red").html("Hello jQuery") 添加颜色属性
}
$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。
当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。

提示：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

3. 语法

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

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

  1. 文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

4. jQuery选择器

  1. jQuery 元素选择器
    jQuery 使用 CSS 选择器来选取 HTML 元素。
    $("p") 选取 <p> 元素。
    $("p.intro") 选取所有 class="intro" 的 <p> 元素。
    $("p#demo") 选取所有 id="demo" 的 <p> 元素。
  2. jQuery 属性选择器
    jQuery 使用 XPath 表达式来选择带有给定属性的元素。
    $("[href]") 选取所有带有 href 属性的元素。
    $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
    $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
    $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
  3. jQuery CSS 选择器
    jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
    下面的例子把所有 p 元素的背景颜色更改为红色：
    实例
    $("p").css("background-color","red");

5. jQuery 事件

jQuery 是为事件处理特别设计的。

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

更多 事件方法见jQuery 事件参考手册。

6. jQuery 效果

隐藏、显示、淡入淡出、滑动、动画

  1. 隐藏和显示
    语法：
$(selector).hide(speed,callback);  //隐藏
$(selector).show(speed,callback);  //显示
$(selector).toggle(speed,callback);  //切换 hide() 和 show() 方法

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
例如：

<script type="text/javascript">
$(document).ready(function(){
  $("#hide").click(function(){
  $("p").hide();
  });
  $("#show").click(function(){
  $("p").show();
  });
});   ##在body里有两个按钮，一个是隐藏，一个是显示。
</script>
  1. 淡入淡出
    类似hide与show
    语法：
$(selector).fadeIn(speed,callback);   //淡入
$(selector).fadeOut(speed,callback);  //淡出
$(selector).fadeToggle(speed,callback); //在淡入淡出之间切换
$(selector).fadeTo(speed,opacity,callback);   //渐变为给定的不透明度（值介于 0 与 1 之间）

例如：

淡入： 注意display：none

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
<body>
<p>演示带有不同参数的 fadeIn() 方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>   
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>

淡出：注意无display

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut() 方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

在淡入淡出之间切换：fadeToggle()

$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>

渐变到某个透明度fadeTo()

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeTo("slow",0.15);
    $("#div2").fadeTo("slow",0.4);
    $("#div3").fadeTo("slow",0.7);
  });
});
</script>
  1. 滑动
    语法：
$(selector).slideDown(speed,callback);    //向下滑动元素
$(selector).slideUp(speed,callback);     //向上滑动元素
$(selector).slideToggle(speed,callback);    //在 slideDown()与slideUp() 之间切换

例如：

向下滑

<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideDown("slow");
  });
});
</script>
<body> 
<p class="flip">请点击这里</p>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
</body>

向上滑动只需将slideDown改为slideUp即可
切换只需将slideDown换位slideToggle()即可

  1. 动画animate() 方法
    jQuery animate() 方法用于创建自定义动画。
    语法：
    $(selector).animate({params},speed,callback);
    必需的 params 参数定义形成动画的 CSS 属性。
    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
    可选的 callback 参数是动画完成后所执行的函数名称。
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({right:'70%'});
  });
});
</script> 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

提示：可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      opacity:'0',
      height:'150px',
      width:'150px'
    });
  });
});
</script>

定义相对值（该值相对于元素的当前值），需要在值的前面加上 += 或 -=：
例如：在{params}中填充

height:'+=150px',
width:'+=150px'

可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

把 <div> 元素移动到右边，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});
  1. 停止动画stop()：用于在动画或效果完成前对它们进行停止
    语法：$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

  1. jiad
  2. dwd
  3. wdwd
上一篇下一篇

猜你喜欢

热点阅读