返回
数据
分类

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

日期: 2019-11-20 00:28 浏览次数 : 137

jQuery,jquery官网

 

jQuery

 

jQuery 元素选用器

jQuery 使用 CSS 选拔器来抉择 HTML 成分。

$("p") 选取 <p> 元素。

$("p.intro") 接收全部 class="intro" 的 <p> 成分。

$("p#demo") 采用 id="demo" 的率先个 <p> 成分。

jQuery 属性选择器

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

$("[href]") 采纳全部带有 href 属性的因素。

$("[href='#']") 采纳全体带有 href 值等于 "#" 的元素。

$("[href!='#']") 接收全部带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 接收全体 href 值以 ".jpg" 结尾的成分。

jQuery CSS 选择器

jQuery CSS 选用器可用于转移 HTML 成分的 CSS 属性。

上面包车型客车例子把富有 p 成分的背景颜色改变为革命:

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

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){              》》》》》》》成分选择器

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

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

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

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

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

jQuery AJAX 实例

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

<script type="text/javascript">

$(document).ready(function(){

  $("#b01").click(function(){   》》》》》》》》》属性选取器

  $('#myDiv').load('../jquery/test1.txt.htm'/*tpa=);

  });

});

</script>

</head>

<body>

 

<div id="myDiv"><h2>Let AJAX change this text</h2></div>

<button id="b01" type="button">Change Content</button>

jQuery - 拿到内容和品质

jQuery DOM 操作

获取内容 - text()、html() 以致 val()

八个简易实用的用于 DOM 操作的 jQuery 方法:

  • text() - 设置或回到所选成分的文书内容
  • html() - 设置或再次来到所选成分的原委(包蕴 HTML 标识卡塔 尔(英语:State of Qatar)
  • val() - 设置或回到表单字段的值

 

 

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

<script>

$(document).ready(function(){

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

    alert("Text: " + $("#test").text());     >>>>>>>text()方法

  });

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

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

  });

});

</script>

</head>

 

<body>

<p id="test">那是段子中的<b>粗体</b>文本。</p>

<button id="btn1">展现文本</button>

<button id="btn2">显示 HTML</button>

</body>

 

 

 

 

 

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

<script>

$(document).ready(function(){

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

    alert("Value: " + $("#test").val());      >>>>>>>>>val()方法

  });

});

</script>

</head>

 

<body>

<p>姓名:<input type="text" id="test" value="米老鼠"></p>

<button>显示值</button>

 

赢得属性 - attr()

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

上面包车型地铁例证演示怎么着赢得链接中 href 属性的值:

 

 

必赢手机登录网址 , 

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

<script>

$(document).ready(function(){

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

    alert($("#w3s").attr("href"));     》》》》》》》attr()方法

  });

});

</script>

</head>

 

<body>

<p><a href="" id="w3s">W3School.com.cn</a></p>

<button>显示 href 值</button>

jQuery - 设置剧情和特性

设置剧情 - text()、html() 以致 val()

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

<script>

$(document).ready(function(){

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

    $("#test1").text("Hello world!");     》》》》》》设置text()方法

  });

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

    $("#test2").html("<b>Hello world!</b>");    》》》》》设置html()方法

  });

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

    $("#test3").val("Dolly Duck");    》》》》》设置val()方法

  });

});

</script>

</head>

<body>

<p id="test1">那是段子。</p>

<p id="test2">那是另四个段落。</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

<button id="btn1">设置文本</button>

<button id="btn2">设置 HTML</button>

<button id="btn3">设置值</button>

 

 

 

 

 

text()、html() 以至 val() 的回调函数

上边的四个 jQuery 方法:text()、html() 以至val(),同样颇负回调函数。回调函数由多少个参数:被选成分列表中当前成分的下标,以致原本(旧的卡塔尔值。然后以函数新值再次来到您愿意采用的字符串。

上面包车型客车事例演示带有回调函数的 text() 和 html():

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

<script>

$(document).ready(function(){

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

    $("#test1").text(function(i,origText){

      return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

    });     》》》》》回调函数

  });

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

    $("#test2").html(function(i,origText){

      return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";

    });    》》》》》》回调函数

  });

});

</script>

</head>

<body>

<p id="test1">这是<b>粗体</b>文本。</p>

<p id="test2">那是另风流倜傥段<b>粗体</b>文本。</p>

<button id="btn1">显示旧/新文本</button>

<button id="btn2">显示旧/新 HTML</button>

</body>

安装属性 - attr()

jQuery attr() 方法也用于安装/退换属性值。

上边包车型大巴事例演示如何改造(设置卡塔 尔(英语:State of Qatar)链接中 href 属性的值:

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

<script>

$(document).ready(function(){

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

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

  });

});

</script>

</head>

<body>

<p><a href="" id="w3s">W3School.com.cn</a></p>

<button>改变 href 值</button>

attr() 方法也允许你同一时候安装七个特性。

下边包车型客车例子演示如何同时设置 href 和 title 属性:

$(document).ready(function(){

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

       $("#a1").attr({

           "href":"",

           "title":"W3School jQuery 教程"

       });

       });

});

<p>

      <a href="" id="q1">百度</a>

   </p>

   <button id="b1">改变</button>

 

attr() 的回调函数

jQuery 方法 attr(),也提供回调函数。回调函数由两个参数:被选成分列表中当前元素的下标,以至原本(旧的卡塔尔值。然后以函数新值重临您希望采用的字符串。

下边包车型客车例证演示带有回调函数的 attr() 方法:

$(document).ready(function(){

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

    $("#w3s").attr("href", function(i,origValue){

      return origValue + "/jquery";

    });

  });

});

<p><a href="" id="w3s">w3school.com.cn</a></p>

<button>改变 href 值</button>

jQuery - 添日币素

增添新的 HTML 内容

我们将学习用于增加新内容的七个 jQuery 方法:

  • append() - 在被选成分的最后插入内容
  • prepend() - 在被选成分的起来插入内容
  • after() - 在被选成分之后插入内容
  • before() - 在被选成分以前插入内容

 

 

 

jQuery append() 方法

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

$(document).ready(function(){

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

      $("p").append("<b>Appended text</b>.");》》append()方法

   });

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

      $("ol").append("<li>Appended text</li>.");

   });

});

<p>asdfsdfads</p>

   <p>asdfsa</p>

   <ol>

   <li>aaaaaaa</li>

   <li>bbbbbbb</li>

   <li>ccccccc</li>

   </ol>

   <button id="b2">追加文本</button>

   <button id="b3">追加列表</button>

因此 append() 和 prepend() 方法加多若干新因素

在地点的例证中,我们只在被选成分的起来/结尾插入文本/HTML。

只是,append() 和 prepend() 方法可以由此参数接纳Infiniti数量的新因素。能够透过 jQuery 来变化文本/HTML(有如上边包车型大巴例子那样卡塔 尔(阿拉伯语:قطر‎,或然经过 JavaScript 代码和 DOM 成分。

function appendText()

{

var txt1="<p>Text.</p>";              // 以 HTML 创设新因素

var txt2=$("<p></p>").text("Text.");  // 以 jQuery 创设新因素

var txt3=document.createElement("p");

txt3.innerHTML="Text.";               // 通过 DOM 来创造文本

$("body").append(txt1,txt2,txt3);        // 追加新成分

}

<body>

 

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

<button onclick="appendText()">追Gavin本</button>

 

</body>

 

 

 

 

 

Query after() 和 before() 方法

jQuery after() 方法在被选成分之后插入内容。

jQuery before() 方法在被选成分早前插入内容。

$(document).ready(function(){

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

    $("img").before("<b>Before</b>");   >>>>>>>>方法

  });

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

    $("img").after("<i>After</i>");

  });

});

</script>

</head>

<body>

<img src="/i/eg_w3school.gif" alt="W3School Logo" />

<br><br>

<button id="btn1">在图纸后面添Gavin本</button>

<button id="btn2">在图纸后边增多文本</button>

因此 after() 和 before() 方法增多若干新因素

after() 和 before() 方法能够通过参数选拔Infiniti数量的新因素。可以透过 text/HTML、jQuery 可能 JavaScript/DOM 来创建新因素。

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);          // 在 img 之后插入新因素

}

<img src="/i/eg_w3school.gif" alt="W3School Logo" />

<br><br>

<button onclick="afterText()">在图纸前面添Gavin本</button>

 

jQuery - 删除成分

剔除成分/内容

如需删除元素和剧情,平日可接受以下八个 jQuery 方法:

  • remove() - 删除被选成分(及其子成分卡塔 尔(英语:State of Qatar)
  • empty() - 从被选成分中删除子成分

jQuery remove() 方法

jQuery remove() 方法删除被选成分及其子成分。

$(document).ready(function(){

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

    $("#div1").remove();   》》》》能够改为empty(卡塔尔方法

  });

});

</script>

</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

<button>删除 div 元素</button>

过滤被去除的要素

jQuery remove() 方法也可担任多个参数,允许你对被删元素举行过滤。

该参数能够是任何 jQuery 采纳器的语法。

下边包车型客车例子删除 class="italic" 的有所 <p> 成分:

(document).ready(function(){

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

    $("p").remove(".italic");   》》》》接收四个参数

  });

});

</script>

</head>

 

<body>

 

<p>This is a paragraph in the div.</p>

<p class="italic"><i>This is another paragraph in the div.</i></p>   》》》》设置class来定义参数

<p class="italic"><i>This is another paragraph in the div.</i></p>

<button>删除 class="italic" 的所有 p 元素</button>

 

要素采用器

jQuery 成分接纳器基于元素名选拔成分。

在页面中选用全数 <p> 成分:

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

 

 

 

 

getParameter得到的都是String类型的。或许是用于读取提交的表单中的值,也许是有些表单提交过去的数额;

 

jQuery jQuery 成分接受器 jQuery 使用 CSS 选取器来采撷 HTML 成分。 $("p") 选拔 p 成分。 $("p.intro") 选择全部 class="intro" 的 p 成分...