使用jQuery函数

1选择器

1.1说明

选择器本身只是一个有特定语法规则的字符串, 没有实质用处，它的基本语法规则使用的就是CSS的选择器语法, 并对基进行了扩展，只有调用$(), 并将选择器作为参数传入才能起作用。

$(selector)作用 :根据选择器规则在整个文档中查找所有匹配的标签的数组（伪数组）, 并封装成jQuery对象返回

1.2分类

1）选择器是什么?

* 有特定语法规则(css选择器)的字符串

* 用来查找某个/些DOM元素: $(selector)

2）分类

①基本

* #id id选择器

*element（标签名）元素选择器

* * 任意标签

* .class 属性选择器

* selector1,selector2,selector3 取多个选择器的并集(组合选择器)

* selector1selector2selector3取多个选择器的交集(相交选择器)

②层次

*查找子元素, 后代元素, 兄弟元素的选择器

* selector1>selector2（parent > child）: 子元素，在给定的父元素下的子元素中匹配元素

* selector1 selector2（ancestor descendant）: 后代元素，在给定的祖先元素下的后代元素中匹配元素

* selector1+selector2（prev + next）：匹配所有紧接在prev元素后的next元素。不常用

* selector1~selector2（prev ~ siblings）：匹配prev（前面的）元素之后的所有siblings（兄弟姐妹）元素。不常用

③过滤

* 在原有匹配元素中筛选出其中一些（分为基本、内容、可见性、属性三类）

* :first

* :last

* :eq(index)

* :lt

* :gt

* :odd

* :even

* :not(selector)

* :hidden

* :visible

* [attrName]

* [attrName=value]

④表单

* :input

* :text

* :checkbox

* :radio

* :checked: 选中的

基本选择器：

<body>

  <div id="div1" class="box">div1(class="box")</div>

  <div id="div2" class="box">div2(class="box")</div>

  <div id="div3">div3</div>

  <span class="box">span(class="box")</span>

  <br>

  <ul>

  <li>AAAAA</li>

  <li title="hello">BBBBB(title="hello")</li>

  <li class="box">CCCCC(class="box")</li>

  <li title="hello">DDDDDD(title="hello")</li>

  </ul>

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

  <script type="text/javascript">

//1. 选择id为div1的元素

   $('#div1').css('background', 'red')

  //2. 选择所有的div元素

   $('div').css('background', 'red')

  //3. 选择所有class属性为box的元素

  $('.box').css('background', 'red')

  //4. 选择所有的div和span元素

   $('div,span').css('background', 'red')

  //5. 选择所有class属性为box的div元素

  $('div.box').css('background', 'red')

  $('*').css('background', 'red')

</script>

</body>

层次选择器：

<body>

  <ul>

  <li>AAAAA</li>

  <li class="box">CCCCC</li>

  <li title="hello"><span>BBBBB</span></li>

  <li title="hello"><span class="box">DDDD</span></li>

  <span>EEEEE</span>

  </ul>

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

  <script type="text/javascript">

//1. 选中ul下所有的的span

 $('ul span').css('background', 'yellow')

  //2. 选中ul下所有的子元素span

 $('ul>span').css('background', 'yellow')

  //3. 选中class为box的下一个li

 $('.box+li').css('background', 'yellow')

  //4. 选中ul下的class为box的元素后面的所有兄弟元素

  $('ul .box~*').css('background', 'yellow')

  </script>

</body>

过滤选择器：

<body>

  <div id="div1" class="box">class为box的div1</div>

  <div id="div2" class="box">class为box的div2</div>

  <div id="div3">div3</div>

  <span class="box">class为box的span</span>

  <br/>

  <ul>

  <li>AAAAA</li>

  <li title="hello">BBBBB</li>

  <li class="box">CCCCC</li>

  <li title="hello">DDDDDD</li>

  <li title="two">BBBBB</li>

  <li style="display:none">我本来是隐藏的</li>

  </ul>

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

  <script type="text/javascript">

  //1. 选择第一个div

   $('div:first').css('background', 'red')

  //2. 选择最后一个class为box的元素

  $('.box:last').css('background', 'red')

  //3. 选择所有class属性不为box的div

   $('div:not(.box)').css('background', 'red')  //没有class属性也可以

  //4. 选择第二个和第三个li元素

  //$('li:gt(0):lt(3)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次

$('li:gt(0):lt(2)').css('background', 'red') // 多个过滤选择器不是同时执行, 而是依次

  $('li:lt(3):gt(0)').css('background', 'red')

  //5. 选择内容为BBBBB的li

   $('li:contains("BBBBB")').css('background', 'red')

  //6. 选择隐藏的li

   console.log($('li:hidden').length, $('li:hidden')[0])

  //7. 选择有title属性的li元素

   $('li[title]').css('background', 'red')

  //8. 选择所有属性title为hello的li元素

  $('li[title="hello"]').css('background', 'red')

  </script>

  </body>

表单选择器：

<body>

  <form>

  用户名: <input type="text"/><br>

  密 码: <input type="password"/><br>

  爱 好:

  <input type="checkbox" checked="checked"/>篮球

  <input type="checkbox"/>足球

  <input type="checkbox" checked="checked"/>羽毛球 <br>

  性 别:

  <input type="radio" name="sex" value='male'/>男

  <input type="radio" name="sex" value='female'/>女<br>

  邮 箱: <input type="text" name="email" disabled="disabled"/><br>

  所在地:

  <select>

    <option value="1">北京</option>

    <option value="2" selected="selected">天津</option>

    <option value="3">河北</option>

  </select><br>

  <input type="submit" value="提交"/>

  </form>

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

  <script type="text/javascript">

  //1. 选择不可用的文本输入框

   $(':text:disabled').css('background', 'red')

  //2. 显示选择爱好 的个数

  console.log($(':checkbox:checked').length)

  //3. 显示选择的城市名称

  $(':submit').click(function () {

    var city = $('select>option:selected').html() // 选择的option的标签体文本

    city = $('select').val()  // 选择的option的value属性值

    alert(city)

  })

  </script>

  </body>

2工具

$.each(): 遍历数组或对象中的数据

$.trim(): 去除字符串两边的空格

$.type(obj): 得到数据的类型

$.isArray(obj): 判断是否是数组

$.isFunction(obj): 判断是否是函数

$.parseJSON(json) : 解析json字符串转换为js对象/数组

···

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

  <script type="text/javascript">

  //1. $.each(): 遍历数组或对象中的数据

  var obj = {

    name: 'Tom',

    setName: function (name) {

      this.name = name

    }

  }

  $.each(obj, function (key, value) {

    console.log(key, value)

  })

  

  //2. $.trim(): 去除字符串两边的空格

  //3. $.type(obj): 得到数据的类型

  console.log($.type($)) // 'function'

  //4. $.isArray(obj): 判断是否是数组

  console.log($.isArray($('body')), $.isArray([])) // false true

  //5. $.isFunction(obj): 判断是否是函数

  console.log($.isFunction($)) // true

  //6. $.parseJSON(json) : 解析json字符串转换为js对象/数组

  var json = '{"name":"Tom", "age":12}'  // json对象: {}

  // json对象===>JS对象

  console.log($.parseJSON(json))

  json = '[{"name":"Tom", "age":12}, {"name":"JACK", "age":13}]' // json数组: []

  // json数组===>JS数组

  console.log($.parseJSON(json))

  /*

  JSON.parse(jsonString)   json字符串--->js对象/数组

  JSON.stringify(jsObj/jsArr)  js对象/数组--->json字符串

  */

  </script>