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

preface

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

选择器

基本选择器

1. 根据id选择

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

2. 根据html标签选择

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

3. 根据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]')