jQuery基础整理+实例

最新推荐文章于 2024-08-04 16:33:59 发布

橡皮球07

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量905

点赞数

分类专栏：学习笔记文章标签： jquery javascript 库技术博客

学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery 是一个 JavaScript 库。

基础语法是：$(selector).action()，下面的action()就是hide()；

$("#test").hide();隐藏所有id="test"的元素，$("this").hide();隐藏当前的html元素，
$(".test").hide();隐藏所有 class="test" 的元素，$("p").hide();隐藏所有<p> 元素。

点击按钮，隐藏所有 class="test" 的元素。

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){      //文档就绪函数，防止文档在完全加载（就绪）之前运行 jQuery 代码。

  $("button").click(function()     //click()属于触发的事件函数

  { $(".test").hide(); });   //隐藏所有 class="test" 的元素。

$("p").css("background-color","red");  把所有 p 元素的背景颜色更改为红色。

});

</script>

</head>

<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is another paragraph.</p>

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

</body>

</html>

jQuery 库可以通过一行简单的标记被添加到网页中，库的特性有： HTML 元素选取、 HTML 元素操作、 CSS 操作、 HTML 事件函数、 JavaScript 特效和动画、 HTML DOM 遍历和修改、 AJAX、 Utilities。

如果您不愿意在自己的计算机上下载并存放 jQuery 库，那么也可以通过 CDN（内容分发网络）引用它。

使用 Google 的 CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>

使用 Microsoft 的 CDN

<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
</head>

提示：使用谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$this.parent() 获得当前匹配元素集合中每个元素的父元素

$this.children() 方法返回匹配元素集合中每个元素的子元素

$this.parent().children() 也就是说当前元素的父亲的子元素，换言之就是兄弟元素

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");  把所有 p 元素的背景颜色更改为红色。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

单独文件中的函数

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。（通过 src 引用文件）：

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

jQuery 事件

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

jQuery hide() 和 show()

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

实例

$("button").click(function(){
  $("p").hide(1000);          //1000就是1秒，隐藏的速度
});

jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$(selector).toggle(speed,callback);

实例

$("button").click(function(){
  $("p").toggle();
});

jQuery Fading 方法

$(selector).fadeIn(speed,callback); 淡入例子：$("#div1").fadeIn(); .fadeIn("slow"); .fadeIn(3000);
$(selector).fadeOut(speed,callback); 淡出
$(selector).fadeToggle(speed,callback); 切换
$(selector).fadeTo(speed,opacity,callback); 改变不透明度

jQuery 滑动方法

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

jQuery 动画 - animate() 方法创建自定义动画。

$(selector).animate({params},speed,callback);

实例

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',      height:'+=150px' 使用相对值也可   height:'toggle' 让高度收缩，再次点击展开
    width:'150px'        width:'-=50px'   负的相对值
  });
});

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

同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 使用队列功能

如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

实例 1

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery stop() 方法停止动画或效果，适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

stopAll 清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

goToEnd 立即完成当前动画。默认是 false。

实例 1

$(document).ready(function(){

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop(true,true); 带参数的stop()函数

});

</script>

jQuery Callback 函数当动画 100% 完成后，调用 Callback 函数。

$(selector).hide(speed,callback)

错误（没有 callback），alert在动画完成前就跳出提示框了
     
     
      
      $(document).ready(function(){

     
     
     
     
      
        $("button").click(function(){

     
     
     
     
      
        $("p").hide(2000);

     
     
     
     
      
        alert("The paragraph is now hidden");

     
     
     
     
      
        });

     
     
     
     
      
      });
     
     
     
     
      
      正确（有 callback），alert在动画完成后才跳出提示框

$(document).ready(function(){

$("button").click(function(){

$("p").hide(1000,function(){

alert("The paragraph is now hidden");

});

jQuery 方法链接

提示：链接一个动作，您只需简单地把该动作追加到之前的动作上。这样的话，浏览器就不必多次查找相同的元素。

例子 1

下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery DOM 操作 DOM = Document Object Model（文档对象模型）

用于 DOM 操作的 jQuery 方法：获得内容+属性 http://www.w3school.com.cn/jquery/jquery_dom_get.asp

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

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("button").click(function()

{ alert("Value: " + $("#test").val()); }); alert("Text: " + $("#test").text());

alert("HTML: " + $("#test").html());

alert($("#w3s").attr("href"));

});

</script>

</head>

<body>

</body>

</html>

jQuery DOM 操作

用于 DOM 操作的 jQuery 方法：设置内容+属性 http://www.w3school.com.cn/jquery/jquery_dom_set.asp

jQuery添加新的 HTML 内容

append() - 在结尾插入内容 $("p").append("<b>Appended text</b>. ");
prepend() - 在开头插入内容 $("ol").prepend("<li>Prepended item</li>"); //给列表加添加项，需要在<body>中建立列表
after() - 在被选元素之后插入内容 $("img").after("Some text after");
before() - 在被选元素之前插入内容 $("img").before("Some text before");

jQuery删除元素/内容

remove() - 删除被选元素（及其子元素） $("#div1").remove(); $("p").remove(".italic"); 删除 class="italic" 的元素
empty() - 删除子元素 $("#div1").empty();

jQuery 操作 CSS

- addClass() - 添加一个或多个类 $("h1,h2,p").addClass("important blue"); http://www.w3school.com.cn/tiy/t.asp?f=jquery_dom_addclass2
- removeClass() - 删除一个或多个类 $("h1,h2,p").removeClass("blue");
- toggleClass() - 切换添加/删除类
- css() - 返回样式属性 $("p").css("background-color"); 返回首个匹配元素的 background-color 值 http://www.w3school.com.cn/tiy/t.asp?f=jquery_css_getcolor

    - css() - 设置样式属性  $("p").css({"color":"red","font-size":"200%"}); 设置多个CSS属性（使"p" 元素变为红色，再变大200%）

样式表如下：

.important

{ font-weight:bold;

font-size:xx-large; }

.blue

{ color:blue; }

jQuery 尺寸方法

- width() 设置或返回元素的宽度（不包括内边距、边框或外边距）$("#div1").width()
- height() 设置或返回元素的高度（不包括内边距、边框或外边距）$("#div1").height()
- innerWidth() 返回元素的宽度（包括内边距） $("#div1").innerWidth()
- innerHeight() 返回元素的高度（包括内边距） $("#div1").innerHeight()
- outerWidth() 返回元素的宽度（包括内边距、边框） $("#div1").outerWidth()
- outerHeight() 返回元素的高度（包括内边距、边框） $("#div1").outerHeight()
- outerWidth(true) 返回元素的宽度（包括内边距、边框和外边距） $("#div1").outerWidth(true)
- outerHeight(true) 返回元素的高度（包括内边距、边框和外边距） $("#div1").outerHeight(true)

  返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度：$(document).height() $(document).height()

  $(window).width();$(window).height();

返回指定的<div>宽度高度 http://www.w3school.com.cn/tiy/t.asp?f=jquery_dim_width_height

设置<div>的宽度高度 $("#div1").width(320).height(320); http://www.w3school.com.cn/tiy/t.asp？f=jquery_dim_width_height_set

jQuery 遍历

遍历，意为“移动”，根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素。

下图展示了一个家族树。通过 jQuery 遍历，从被选（当前的）元素开始，在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。

这种移动被称为对 DOM 进行遍历。

<div> 元素是 <ul> 的父元素，是所有内容的祖先。<ul> 元素是 <li> 的父元素， <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素， <div> 的后代。<span> 元素是 <li> 的子元素， <ul> 和 <div> 的后代。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素， <div> 的后代。<b> 元素是<li> 的子元素， <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（有相同的父元素）。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

向上遍历 DOM 树

parent() $("span").parent("ul").css({"color":"red"}); 找到<span>的直接父元素，并且它是 <ul> ，显示成红色；
parents() $("span").parents().css({"color":"red"}); 找到<span>的所有祖先，一路向上直到根元素 (<html>)，显示成红色；
parentsUntil() $("span").parentsUntil("div").css({"color":"red"}); 返回介于<span> 与 <div>之间的所有祖先元素；http://www.w3school.com.cn/tiy/t.asp?f=jquery_parentsuntil

向下遍历 DOM 树

children() $("div").children("p.1").css({"color":"red"}); 找到<span>的直接子元素，并且它是<p class="1">p，显示成红色；
find() $("div").find("span").css({"color":"red"}); 找到<div>所有后代，并且它是 <span>，显示成红色；
$("div").find("*").css({"color":"red"});找到<div>的所有后代，显示成红色；

水平遍历 DOM 树

siblings() $("h2").siblings("p"); 找到<h2>的所有同胞元素，并且它是 <p> ；
next() $("h2").next(); 返回 <h2> 的下一个同胞元素；
nextAll() $("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素；
nextUntil() $("h2").nextUntil("h6"); 返回介于 <h2> 与 <h6> 元素之间的所有同胞元素；http://www.w3school.com.cn/tiy/t.asp?f=jquery_nextuntil
prev() 逆向，向上（上一个同胞元素）
prevAll() 逆向，向上
prevUntil() 逆向，向上

jQuery遍历—过滤

first() $("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素; 注意，$()中填了<div> <p>两个元素；
last() $("div p").last(); 选取最后一个 <div> 元素内部的最后一个 <p> 元素;
eq() $("p").eq(1); 选取索引号为 1的<p> 元素；http://www.w3school.com.cn/tiy/t.asp?f=jquery_eq
filter() $("p").filter(".intro"); 选取类名= intro 的所有 <p> 元素；
not() $("p").not(".intro"); 选取类名=！ intro 的所有 <p> 元素；

实例：用两个javascript!!! http://www.w3school.com.cn/tiy/t.asp?f=jquery_attributes_attr_set

<html>

<head>

$(document).ready(function(){

$("button").click(function(){

$("img").attr("width","180"); //给Img的width属性添加值180

});

$(document).ready(function(){

$("li").click(function(){

alert($(this).attr("name"));

});

</script>

</head>

<body>

<br />

<button>设置图像的 width 属性</button>

<ul>

</ul>

</body>

</html>

addClass用JS添加样式、删除样式：

<!DOCTYPE html>

<html>

$(document).ready(function(){

$("#li1").click(function(){

$("#li1").addClass("myactive");

$("#li2").removeClass("myactive");

$("#li3").removeClass("myactive");

});

$(document).ready(function(){

$("#li2").click(function(){

$("#li2").addClass("myactive");

$("#li1").removeClass("myactive");

$("#li3").removeClass("myactive");

});

$(document).ready(function(){

$("#li3").click(function(){

$("#li3").addClass("myactive");

$("#li1").removeClass("myactive");

$("#li2").removeClass("myactive");

});

</script>

.myactive {color: #ffffff;background-color: #0088cc;}

</style>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

ajax post 给后台asp传数据：

<!DOCTYPE html>

<html>

<head>

</script>

$(document).ready(function(){

$("#li1").click(function(){

$("#li1").addClass("myactive");

$("#li2").removeClass("myactive");

$.post("/example/jquery/demo_test_post.asp",

{

name:$(this).attr("name"),

city:"Duckburg"

function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

$(document).ready(function(){

$("#li2").click(function(){

$("#li2").addClass("myactive");

$("#li1").removeClass("myactive");

$.post("/example/jquery/demo_test_post.asp",

{

name:$(this).attr("name"),

city:"Duckburg"

function(data,status){

alert("数据：" + data + "\n状态：" + status);

});

</script>

.myactive {color: #ffffff;background-color: #0088cc;}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html>

function myFunction1()

{ x=document.getElementById("demo");

x.innerHTML="HelloJavaScript!"; }

橡皮球07

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础整理+实例

jQuery 是一个 JavaScript 库。基础语法是：$(selector).action()，下面的action()就是hide()；$("#test").hide();隐藏所有id="test"的元素，$("this").hide();隐藏当前的html元素，$(".test").hide();隐藏所有 class="test" 的元素，$("p").hide();隐藏所有元
复制链接

扫一扫