jQuery设计思想01

选择网页元素

1. 模拟css选择元素
   请参阅CSS选择器参考手册： http://www.runoob.com/cssref/css-selectors.html
2. 独有表达式选择
3. 多种筛选方式

---

一、模拟css选择元素

在css中我们可以通过下面这种方式获取到元素，并修改其样式

<style>
    #div1{
        background-color: brown;
    }
    .p1{
        background-color: cadetblue;
        color: darkgreen;
    }
</style>
<div id="div1">我是div1</div>
<p class="p1">我是p1</p>

效果：

我是div1

我是p1

在jQuery中，模仿css选择器获取元素，同样地也是这个样子，如下：

<div id="div2">我是div2</div>
<p class="p2">我是p2</p>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $("#div2").css("backgroundColor", "brown");
    $(".p2").css({
        "backgroundColor": "cadetblue",
        "color": "darkgreen"
    });
</script>

效果跟上面是同样的：(为了避免上面css对下面的影响，id与class修改了)

我是div2

我是p2

• css中能使用的选择器，在jQuery几乎都可以使用

  jQuery选择器

---

二、独有表达式选择

选择器	实例	选取
:first	$("p:first")	页面所有p元素中的第一个 p 元素
:last	$("p:last")	页面所有p元素中的最后一个 p 元素
:even	$("li:even")	所有偶数 li 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:odd	$("li:even")	所有奇数 li 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
:eq	$("li:eq(2)")	li兄弟节点中的第三个

• :first与:last

  <p>我是第1个p</p>
  <p>我是第2个p</p>
  <p>我是第3个p</p>
  <script>
      $("p:first").css("background","red");
      $("p:last").css("background","blue");
  </script>

  运行结果：
  

• :even与:odd

  <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
  </ul>
  <script>
      $("li:even").css("background","#99CC99");//浅绿
      $("li:odd").css("background","#FF6666");//淡红
  </script>

  运行结果：
  

• :eq()

  <ul>
      <li>我是第1个li</li>
      <li>我是第2个li</li>
      <li>我是第3个li</li>
      <li>我是第4个li</li>
      <li>我是第5个li</li>
  </ul>
  <script>
      $("li:eq(2)").css("background","blue");
  </script>

  运行结果：
  

三、多种筛选方式

一种效果有多种方式去实现，想怎么操作就怎么操作

1. 比如，我们要使下面第三个li标签背景变为绿色，除了可以使用:eq(),还可以使用.eq()

   <ul>
       <li>我是第1个li</li>
       <li>我是第2个li</li>
       <li>我是第3个li</li>
       <li>我是第4个li</li>
       <li>我是第5个li</li>
   </ul>

   <script>
       $("li").eq(2).css("background","green");
   </script>

   运行结果：
   

2. 再比如，我们要使li标签中，class=box的标签背景色变为粉红色，下面两种方法都可以

   <ul>
       <li class="box">我是第1个li</li>
       <li>我是第2个li</li>
       <li>我是第3个li</li>
       <li class="box">我是第4个li</li>
       <li>我是第5个li</li>
   </ul>

   方法1：

   <script>
       $("li.box").css("background","pink");
   </script>

   方法2：

   <script>
       $("li").filter(".box").css("background","pink");
   </script>

   运行结果：
   

jQuery写法

1、方法函数化
2、链式操作
3、取值赋值一体化(合体)

JQ与JS的关系

jq地下都是由js面向对象进行封装的
$(“#div1”)他实际上是一个jQuery对象，只能调用jQuery封装的函数

可以共存，不能混用
不能前一半js后一般jq
也不能前一半jq后一般js