5 HTML&JS等前端知识系列之jquery基础

preface

jquery其实就是对javascript的再次封装，方便我们开发者调用，下载地址是：http://jquery.com/download/ ，下面就说说常用使用方法

选择器

基本选择器

根据id选择

$('#hehe').text(123);

根据html标签选择

$('span').text('hehe');

根据css样式来选择

$('.h1').text('class')

多个标签同时选择

$('#hehe,span,.h1').text('okkk')

层级选择器

一级一级往下找。

$('#hehe span .h1 .inp').text('fuck')

子级查找,在给定的父元素下匹配所有的子元素

$("form > input")

同级查找

console.log($("#prev ~ div").text())

查找所有跟在prev的css样式后的div标签。

console.log($('.prev + div').text())

基本筛选

-eq 找出下标等于指定数的table，下标都是以0开始

<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script src="jquery-2.1.1.min.js">
</script>
<script>
$('td:eq(2)').text()
$('.hello ul:eq(2)').css('color','red')  //针对其他的相同标签有多个的时候也可这么干
</script>

:even

，找出下标为奇数的表格,即第一行，第二行，第三行，索引值对应的也是0,2,4，这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素，依此类推在匹配。

<table border="1">
<tr><td>TD #0</td><td>TD #1</td><td>TD #2</td></tr>
<tr><td>TD #3</td><td>TD #4</td><td>TD #5</td></tr>
<tr><td>TD #6</td><td>TD #7</td><td>TD #8</td></tr>
</table>
<script src="jquery-2.1.1.min.js">
</script>
<script>
$('tr:even').css('color','red')
</script>

:odd

,找出下标是偶数的标签，即匹配第二行，第四行等等，索引值对应的也是1,3,5....

$('li:odd').css('color','red')

first,找出指定元素的第一个，等价与

:eq(0)

和

:lt(1)

。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

<div class="hello">div
<ul>
<li>PeKing0</li>
</ul>
<ul>
<li>PeKing1</li>
</ul>
<ul>
<li>PeKing2</li>
</ul>
<ul>
<li>PeKing3</li>
</ul>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
$('.hello ul').first().css('color','red')
</script>

:gt,找出下标大于指定数的标签

$('.hello ul:gt(1)').css('color','red')

:head,找出所有的标题标签，如h1,h2,h3等等

$(':header').css('color','green')

:not,找所有没有被选中多选框

$('input:not(:checked)').css("background-color", "yellow")

检测内容的

:contains(),用来查找的一个文本字符串。这是区分大小写的。

$("div:contains('John')").css('text-decoration','underline')

empty,选择所有没有子元素的元素（包括文本节点）

<div>
<span></span>
<span></span>
<span></span>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
$('div span:empty')
</script>

:has，选择元素其中至少包含指定选择器匹配的一个种元素，如$('div:has(span)')，表示在div下面必须要有span标签才能匹配上，即使span标签不是子级，是更深的级别也行。

<div>
<span></span>
<span></span>
<span></span>
</div>
<script src="jquery-2.1.1.min.js"></script>
<script>
$('div:has(span)').text(123)
</script>

:parent,选择当前元素

$('#fuck:parent').css('background-color','red')

属性

[key=val]

$('input[checked=checked]')