首页 > 其他分享 >jQuery

jQuery

时间：2022-09-26 09:14:45浏览次数：88  
标签：jQuery function 元素 div 方法 click

一、引言1.1 jQuery概述1.2 jQuery特点1.3 为什么要用jQuery二、jQuery安装2.1 直接引用jQuery2.2 CDN引用2.2.1 什么是CDN？2.2.2 常见 CDN三、jQuery语法【重点】3.1 页面加载方式3.2 jQuery选择器3.3 基本使用3.4 jQuery事件及常用事件方法四、jQuery动画效果4.1 隐藏显示4.2 淡入淡出4.3 滑动4.4 动画4.5 Callback4.6 链式编程五、 jQuery DOM操作【重点】5.1 获取值5.2 设置5.3 添加元素5.4 删除元素5.5 CSS类5.6 css()方法5.7 尺寸5.8. 案例 : 隔行换色5.9. 案例 : 复选框选中/取消选中5.10. 案例 : 省市两级联动六、jQuery遍历6.1 遍历6.2 祖先 jQuery parent() 方法6.3 后代 jQuery children() 方法6.4 同胞 jQuery siblings() 方法6.5 过滤 jQuery first() 方法八、其他8.1 jQuery noConflict方法

一、引言

1.1 jQuery概述

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

1.2 jQuery特点

  • 具有独特的链式语法。

  • 支持高效灵活的CSS选择器。

  • 拥有丰富的插件。

  • 兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

1.3 为什么要用jQuery

  • 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。很多大公司都在使用 jQuery， 例如：Google、Microsoft、IBM、Netflix

二、jQuery安装

2.1 直接引用jQuery

从 jQuery.com 官网或从GitHub下载合适版本（本课程使用1.12.4版本，兼容性更好，最新版本为3.x），放入服务器的合适目录中，在页面中直接引用。

有两个版本的 jQuery 可供下载：

  • Production version - 生产版本， 用于实际的网站中，已被精简和压缩。

  • Development version - 开发版本， 用于测试和开发（未压缩，便于可读）。

jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src="">< /script> 标签引用

<head>
    <script src="jquery-1.12.2.min.js"></script>
</head>

2.2 CDN引用

2.2.1 什么是CDN？

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

2.2.2 常见 CDN

百度 CDN

<head>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>

新浪 CDN

<head>
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
    </script>
</head>

 

三、jQuery语法【重点】

3.1 页面加载方式

// jQuery 方式： 表示页面DOM加载完毕，则执行，比onload事件执行早，并且可以写多个。$是jQuery函数的简写。
$(document).ready(function(){
    alert("页面加载了");
});
​
// jquery 方式，是上一种方式的缩写 ,可以重复多次有效
$(function(){
     alert("页面加载了");
});
​
​
// JavaScript 方式, 只有一次有效
window.onload = function() {
    alert("onload");
}

 

3.2 jQuery选择器

  • 元素选择器：jQuery 元素选择器基于元素名选取元素。

  • 示例：在页面中选取所有 <p> 元素

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

  • id选择器：jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

  • 页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。通过 id 选取元素语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

  • class选择器：jQuery 类选择器可以通过指定的 class 查找元素。

  • 语法如下：

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

 

 

3.3 基本使用

    • 选择符（selector）表示"查找" HTML 元素

    • jQuery 的 action() 执行对元素的操作

- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏所有 id="test" 的元素
<html>
  <head>
     <script src="jquery-1.12.2.min.js"></script>
  </head>
</html>
<body>  
     <p>窗前明月光</p>
     <p>疑是地上霜</p>
     <p>举头望明月</p>
     <p>低头思故乡</p>
     <script>
        $("p").hide();
        $("p.test").hide(); 
        $("#test").hide();
     </script>
</body>

 

3.4 jQuery事件及常用事件方法

  • 什么是事件？

    • 页面对不同访问者的响应叫做事件。

  • 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

  • 实例：

    • 在元素上移动鼠标。

    • 选取单选按钮

  • 点击元素：在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。 常见 DOM 事件：

鼠标事件键盘事件表单事件文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
  • jQuery 事件方法语法：

  • 在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

    • 页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){
    // 动作触发后执行的代码!!
});

  • 常用的 jQuery 事件方法

  • click()：当按钮点击事件被触发时会调用一个函数。

  • 该函数在用户点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

$("p").click(function(){
  $(this).hide();
});

  • dblclick()：当双击元素时，会发生 dblclick 事件。

  • dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

$("p").dblclick(function(){
  $(this).hide();
});

  • mouseenter()：当鼠标指针穿过元素时，会发生 mouseenter 事件。

  • mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

$("#p1").mouseenter(function(){
    alert('您的鼠标移到了 id="p1" 的元素上!');
});

  • mouseleave()：当鼠标指针离开元素时，会发生 mouseleave 事件。

  • mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

$("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
});

  • mousedown()：当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

  • mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

$("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
});

  • mouseup()：当在元素上松开鼠标按钮时，会发生 mouseup 事件。

  • mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

$("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
});

  • hover()：hover()方法用于模拟光标悬停事件。

  • 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

  • focus()：当元素获得焦点时，发生 focus 事件。

  • 当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。 focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

$("input").focus(function(){
  $(this).css("background-color","#cccccc");
});

  • blur()：当元素失去焦点时，发生 blur 事件。

  • blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

$("input").blur(function(){
  $(this).css("background-color","#ffffff");
});

四、jQuery动画效果

4.1 隐藏显示

hide()：可以使用 hide() 将元素隐藏

$("#hide").click(function(){
  $("p").hide();
});

show()： 您可以使用show()将元素显示

$("#show").click(function(){
  $("p").show();
});

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

  • 显示被隐藏的元素，并隐藏已显示的元素。

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

事实上，这三种方法都是有两个参数的：

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

  • 可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

4.2 淡入淡出

  • 通过 jQuery，您可以实现元素的淡入淡出效果。

  • jQuery 拥有下面四种 fade 方法：

    • fadeIn()

    • fadeOut()

    • fadeToggle()

    • fadeTo()

jQuery fadeIn() 方法：jQuery fadeIn() 用于淡入已隐藏的元素。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。.

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

  • 下面的例子演示了带有不同参数的 fadeIn() 方法：

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

jQuery fadeOut() 方法用于淡出可见元素。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

  • 下面的例子演示了带有不同参数的 fadeOut() 方法：

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

  • jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

  • 如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

  • 如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是 fading 完成后所执行的函数名称。

  • 下面的例子演示了带有不同参数的 fadeToggle() 方法：

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

  • 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

  • 可选的 callback 参数是该函数完成后所执行的函数名称。

  • 下面的例子演示了带有不同参数的 fadeTo() 方法：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

4.3 滑动

  • 通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：

    • slideDown()

    • slideUp()

    • slideToggle()

  • jQuery slideDown() 方法用于向下滑动元素。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • 下面的例子演示了 slideDown() 方法：

$("#flip").click(function(){
  $("#panel").slideDown();
});

jQuery slideUp() 方法用于向上滑动元素。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • 下面的例子演示了 slideUp() 方法：

$("#flip").click(function(){
  $("#panel").slideUp();
});

  • jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。

  • 如果元素向下滑动，则 slideToggle() 可向上滑动它们。

  • 如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是滑动完成后所执行的函数名称。

  • 下面的例子演示了 slideToggle() 方法：

$("#flip").click(function(){
  $("#panel").slideToggle();
});

4.4 动画

animate() 方法：jQuery animate() 方法用于创建自定义动画。

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

  • 必需的 params 参数定义形成动画的 CSS 属性。

  • 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

  • 可选的 callback 参数是动画完成后所执行的函数名称。

  • 下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：

$("button").click(function(){
  $("div").animate({left:'250px'});
});

  • 操作多个属性

  • 请注意，生成动画的过程中可同时使用多个属性：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

  • 可以用 animate() 方法来操作所有 CSS 属性吗？

  • 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 驼峰式标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

  • 同时，色彩动画并不包含在核心 jQuery 库中。

  • 如果需要生成颜色动画，您需要从 jquery.com 下载 颜色动画 插件。

  • 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

预定义的值：您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

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

  • 使用队列功能：默认地，jQuery 提供针对动画的队列功能。

  • 这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

$("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");
});

下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

4.5 Callback

  • 许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。

  • 例子：$("p").hide("slow")

  • speed* 或 duration 参数可以设置许多不同的值，比如 "slow", "fast", "normal" 或毫秒。

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落现在被隐藏了");
  });
});

以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

$("button").click(function(){
  $("p").hide(1000);
  alert("段落现在被隐藏了");
});

4.6 链式编程

  • 直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

  • 不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

  • 提示： 这样的话，浏览器就不必多次查找相同的元素。

  • 如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

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

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

  • 如果需要，我们也可以添加多个方法调用。

  • 提示：当进行链接时，代码行会变得很差。不过，jQuery 语法不是很严格；您可以按照希望的格式来写，包含换行和缩进。

  • 如下书写也可以很好地运行：

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

五、 jQuery DOM操作【重点】

5.1 获取值

  • jQuery 拥有可操作 HTML 元素和属性的强大方法。

  • jQuery 中非常重要的部分，就是操作 DOM 的能力。

  • jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

  • 三个简单实用的用于 DOM 操作的 jQuery 方法：

    • text() - 设置或返回所选元素的文本内容

    • html() - 设置或返回所选元素的内容（包括 HTML 标记）

    • val() - 设置或返回表单字段的值

  • 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

  • 获取属性-attr()

  • jQuery attr() 方法用于获取属性值。

  • 下面的例子演示如何获得链接中 href 属性的值：

$("button").click(function(){
  alert($("#a1").attr("href"));
});

5.2 设置

  • 我们将使用前一章中的三个相同的方法来设置内容：

    • text() - 设置或返回所选元素的文本内容

    • html() - 设置或返回所选元素的内容（包括 HTML 标记）

    • val() - 设置或返回表单字段的值

  • 下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Hello world!");
});

  • 上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

  • 下面的例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

  • jQuery attr() 方法也用于设置/改变属性值。

  • 下面的例子演示如何改变（设置）文本中 color属性的值：

$("button").click(function(){
  $("#font1").attr("color","red");
});

5.3 添加元素

  • 我们将学习用于添加新内容的四个 jQuery 方法：

    • append() - 在被选元素的结尾插入内容

    • prepend() - 在被选元素的开头插入内容

    • after() - 在被选元素之后插入内容

    • before() - 在被选元素之前插入内容

  • jQuery append() 方法在被选元素的结尾插入内容。

$("p").append("追加文本");

jQuery prepend() 方法在被选元素的开头插入内容。

$("p").prepend("v文本");

  • 在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

  • 不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

  • 在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

  • jQuery after() 方法在被选元素之后插入内容。

  • jQuery before() 方法在被选元素之前插入内容。

$("img").after("在后面添加文本");
 
$("img").before("在前面添加文本");

  • after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

  • 在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

5.4 删除元素

  • 如需删除元素和内容，一般可使用以下两个 jQuery 方法：

    • remove() - 删除被选元素（及其子元素）

    • empty() - 从被选元素中删除子元素

$("#div1").remove();
$("#div1").empty();

  • jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

  • 该参数可以是任何 jQuery 选择器的语法。

  • 下面的例子删除 class="italic" 的所有 <p> 元素：

$("p").remove(".italic");

5.5 CSS类

  • jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

    • addClass() - 向被选元素添加一个或多个类

    • removeClass() - 从被选元素删除一个或多个类

    • toggleClass() - 对被选元素进行添加/删除类的切换操作

    • css() - 设置或返回样式属性

  • 下面的样式表将用于本页的所有例子：

.important {
    font-weight:bold;
    font-size:xx-large;
}
.blue {
	color:blue;
}

下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

您也可以在 addClass() 方法中规定多个类：

$("button").click(function(){
  $("body div:first").addClass("important blue");
});

下面的例子演示如何在不同的元素中删除指定的 class 属性：

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

5.6 css()方法

  • css() 方法设置或返回被选元素的一个或多个样式属性。

  • 如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

$("p").css("background-color");

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

$("p").css("background-color","yellow");

如需设置多个 CSS 属性，请使用如下语法：

css({"propertyname":"value","propertyname":"value",...});

下面的例子将为所有匹配元素设置 background-color 和 font-size：

$("p").css({"background-color":"yellow","font-size":"200%"});

5.7 尺寸

  • jQuery 提供多个处理尺寸的重要方法：

    • width()

    • height()

    • innerWidth()

    • innerHeight()

    • outerWidth()

    • outerHeight()

尺寸
1

 

  • width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

  • height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

  • 下面的例子返回指定的 <div> 元素的宽度和高度：

$("button").click(function(){
  var txt="";
  txt+="div 的宽度是: " + $("#div1").width() + "</br>";
  txt+="div 的高度是: " + $("#div1").height();
  $("#div1").html(txt);
});

  • innerWidth() 方法返回元素的宽度（包括内边距）。

  • innerHeight() 方法返回元素的高度（包括内边距）。

  • 下面的例子返回指定的 <div> 元素的 inner-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="div 高度，包含内边距: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

  • outerWidth() 方法返回元素的宽度（包括内边距和边框）。

  • outerHeight() 方法返回元素的高度（包括内边距和边框）。

  • 下面的例子返回指定的 <div> 元素的 outer-width/height：

$("button").click(function(){
  var txt="";
  txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
  txt+="div 高度，包含内边距和边框: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

 

5.8. 案例 : 隔行换色

2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("tr:even").css("backgroundColor", "red");
            $("tr:odd").css("backgroundColor", "green");
        });
    </script>
</head>
<body>
<table border="1" width="400px">
    <tr>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>青龙</td>
        <td>23</td>
    </tr>
    <tr>
        <td>2</td>
        <td>白虎</td>
        <td>43</td>
    </tr>
    <tr>
        <td>3</td>
        <td>朱雀</td>
        <td>54</td>
    </tr>
    <tr>
        <td>4</td>
        <td>玄武</td>
        <td>24</td>
    </tr>
    <tr>
        <td>5</td>
        <td>饕鬄</td>
        <td>41</td>
    </tr>
    <tr>
        <td>6</td>
        <td>梼杌</td>
        <td>33</td>
    </tr>
</table>
</body>
</html>

 

5.9. 案例 : 复选框选中/取消选中

3

  • 在下面代码中$(this)代表被点击的id为selectAll的复选框元素, $(this).prop("checked")就是这个元素的是否被选中属性的值.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#selectAll").click(function () {
                //alert($(this).attr("checked"));
                //alert($(this).prop("checked"));
                $(".sel").prop("checked", $(this).prop("checked"));
            });
        });

    </script>
</head>
<body>
<table border="1" width="400px">
    <tr>
        <td><input type="checkbox" id="selectAll"/>全选/取消</td>
        <td>id</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>1</td>
        <td>青龙</td>
        <td>23</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>2</td>
        <td>白虎</td>
        <td>43</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>3</td>
        <td>朱雀</td>
        <td>54</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>4</td>
        <td>玄武</td>
        <td>24</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>5</td>
        <td>饕鬄</td>
        <td>41</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="sel"/></td>
        <td>6</td>
        <td>梼杌</td>
        <td>33</td>
    </tr>
</table>
</body>
</html>

 

5.10. 案例 : 省市两级联动

4

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
    let privs = "[\"河北省\", \"河南省\", \"山西省\"]";
    let citys = "[[\"石家庄\",\"邯郸\",\"唐山\",\"邢台\"],[\"鹤壁\",\"郑州\",\"洛阳\",\"漯河\"],[\"太原\",\"临汾\",\"长治\"]]";

    privs = JSON.parse(privs);
    citys = JSON.parse(citys);

    for (let i = 0; i < privs.length; i++) {
        let option = document.createElement("option");

        $(option).attr("value", i).text(privs[i]);

        $("#priv").append($(option));
    }

    $("#priv").change(function() {

        let citys1 = citys[$(this).val()];
        $("#city").empty();
        let option = document.createElement("option");
        $(option).text("-----请选择市-----");
        $("#city").append($(option));

        if(citys1 == null) {
            return;
        }

        for (let j = 0; j < citys1.length; j++) {
            let option = document.createElement("option");
            $(option).attr("value", j).text(citys1[j]);
            $("#city").append($(option));
        }
    });

    </script>
</head>
<body>
  <select id="priv">
      <option>-----请选择省-----</option>
  </select>
  <select id="city">
      <option>-----请选择市-----</option>
  </select>
</body>
</html>

 

六、jQuery遍历

6.1 遍历

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

  • 下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

6.2 祖先 jQuery parent() 方法

  • parent() 方法返回被选元素的直接父元素。

  • 该方法只会向上一级对 DOM 树进行遍历。

  • 下面的例子返回每个 span 元素的直接父元素：

$(document).ready(function(){
  $("span").parent();
});

  • parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (html)。

  • 下面的例子返回所有 span 元素的所有祖先：

$(document).ready(function(){
  $("span").parents();
});

  • 您也可以使用可选参数来过滤对祖先元素的搜索。

  • 下面的例子返回所有 span 元素的所有祖先，并且它是 url 元素：

$(document).ready(function(){
  $("span").parents("ul");
});

  • parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

  • 下面的例子返回介于 span 与 di v 元素之间的所有祖先元素：

$(document).ready(function(){
  $("span").parentsUntil("div");
});

6.3 后代 jQuery children() 方法

  • children() 方法返回被选元素的所有直接子元素。

  • 该方法只会向下一级对 DOM 树进行遍历。

  • 下面的例子返回每个div 元素的所有直接子元素：

$(document).ready(function(){
  $("div").children();
});

  • 您也可以使用可选参数来过滤对子元素的搜索。

  • 下面的例子返回类名为 "a" 的所有 p 元素，并且它们是 div 的直接子元素：

$(document).ready(function(){
  $("div").children("p.a");
});

  • find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。

  • 下面的例子返回属于 div 后代的所有 span 元素：

$(document).ready(function(){
  $("div").find("span");
});

下面的例子返回 div 的所有后代：

$(document).ready(function(){
  $("div").find("*");
});

6.4 同胞 jQuery siblings() 方法

  • siblings() 方法返回被选元素的所有同胞元素。

  • 下面的例子返回 h2 的所有同胞元素：

$(document).ready(function(){
  $("h2").siblings();
});

  • 您也可以使用可选参数来过滤对同胞元素的搜索。

  • 下面的例子返回属于 h2 的同胞元素的所有 p 元素：

$(document).ready(function(){
  $("h2").siblings("p");
});

  • next() 方法返回被选元素的下一个同胞元素。

  • 该方法只返回一个元素。

  • 下面的例子返回h2的下一个同胞元素：

$(document).ready(function(){
  $("h2").next();
});

  • nextAll() 方法返回被选元素的所有跟随的同胞元素。

  • 下面的例子返回 h2 的所有跟随的同胞元素：

$(document).ready(function(){
  $("h2").nextAll();
});

  • nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

  • 下面的例子返回介于 h2 与 h6 元素之间的所有同胞元素：

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

  • prev()方法取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

  • 下面的例子返回 h2 的下一个同胞元素

$(document).ready(function(){
  $("h2").prev();
});

prevAll() 方法查找当前元素之前所有的同辈元素

prevUntil() 方法查找当前元素之前所有的同辈元素，直到遇到匹配的那个元素为止

6.5 过滤 jQuery first() 方法

  • first() 方法返回被选元素的首个元素。

  • 下面的例子选取首个div 元素内部的第一个 p 元素：

$(document).ready(function(){
  $("div p").first();
});

  • last() 方法返回被选元素的最后一个元素。

  • 下面的例子选择最后一个div 元素中的最后一个 p 元素：

$(document).ready(function(){
  $("div p").last();
});

  • eq() 方法返回被选元素中带有指定索引号的元素。

  • 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个p 元素（索引号 1）：

$(document).ready(function(){
  $("p").eq(1);
});

  • filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

  • 下面的例子返回带有类名 "url" 的所有p 元素：

$(document).ready(function(){
  $("p").filter(".url");
});

  • not() 方法返回不匹配标准的所有元素。

  • 提示：not() 方法与 filter() 相反。

  • 下面的例子返回不带有类名 "url" 的所有p元素：

$(document).ready(function(){
  $("p").not(".url");
});

八、其他

8.1 jQuery noConflict方法

  • 正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

  • 如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

  • 其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

  • 其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

  • jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

  • noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。

  • 当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();
jQuery(document).ready(function(){
  jQuery("button").click(function(){
    jQuery("p").text("jQuery 仍然在工作!");
  });
});

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});
 

标签：jQuery,function,元素,div,方法,click
From： https://www.cnblogs.com/bxmhdh/p/16729701.html

相关文章

  • JQuery获取Select选中的值
        想要获取到选中的值，你不能在option里面写value要不然获取不到的  想获取文本那就这样写：  这两个并不是一样的......
  • jquery判断select中是否存在某个value以及进行增加、删除操作
    一、判断select中是否存在值为value的项functionisExistOption(id,value){varisExist=false;varcount=$('#'+id).find('option').length;......
  • jQuery 笔记
    jQueryscript和document.ready首先，在页面顶部添加script标签，记得添加结束标签。浏览器会运行script标签所有的JavaScript脚本包括jQuery。在script标签中......
  • jQuery中attr()、prop()、data()用法及区别
    attr()此方法从jq1.0开始一直存在，官方文档写的作用是读/写DOM的attribute值，其实1.6之前有时候是attribute，有时候又是property。prop()此方法jq1.6引入，读/写DOM的propert......
  • jquery+echarts(数据可视化图表)
      https://echarts.apache.org/zh/index.html  echarts官网  ApacheECharts支持多种下载方式，可以在下一篇教程安装中查看所有方式。这里，我们以从 jsDelivr......
  • js与jquery实例-拖动改变列宽和行高
     js与jquery实例-拖动改变列宽和行高如何通过javascript或者jquery实现改变表格宽度或者行高的功能？今天就把这个功能代码分享给大家，绝对原创哦，代码少而且易懂。先看效果......
  • JQuery的父、子、兄弟节点选择器
    一、获取祖先级元素1、parent(selector)：返回直接父元素，可选择过滤。2、parents(selector)：返回祖先元素，包括父元素，可选择过滤。3、closest(selector)：返回第一个祖先元素（祖先......
  • 常见的 JQuery 正则表达式以及验证方法
    一、校验数字的表达式1数字：^[0-9]*$ 2n位的数字：^\d{n}$ 3至少n位的数字：^\d{n,}$ 4m-n位的数字：^\d{m,n}$ 5零和非零开头的数字：^(0|[1-9][0-9]*)$ 6非零开头的最......
  • jQuery中ajaxPrefilter的应用[设置通用参数]
    $.ajaxPrefilter(function(options,originalOptions,jqXHR){//tm1、tm2表示开始时间、结束时间varrequestType,params,startTime,endTime;requestType=(......
  • js和jQuery的区别（超级详细）
    1概念1.1js概念JavaScript是用于Web客户端开发的脚本语言。1.2jQuery概念jQuery是一个快速、简洁的JavaScript库，极大的简化了javascript编程。jQuery是js的框架,基......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99