jQuery笔记 02：jQuery对象（基本行为、选择器和工具方法）

jQuery对象是一个伪数组，即有 0 到 length-1 的属性，且有 length 属性

$(function () {
  var $div = $("div");
  console.log($div);
  // 类似于数组
  for (let i = 0; i < $div.length; i++) {
    console.log($div[i]);
  }
});

基本行为

<button>测试一</button>
<button>测试二</button>
<button id="btn03">测试三</button>
<button>测试四</button>
<script>
    var $btns = $('button');
    // 获取jQuery对象中包含的dom元素的个数
    console.log($btns.size(), $btns.length); // 4 4 
    // 获取jQuery对象中指定下标的dom元素
    console.log($btns[1].innerHTML, $btns.get(1).innerHTML); // 测试二 测试二
    // 遍历jQuery对象中的dom元素
    $btns.each(function (index, item) {
        // this指的是遍历出来的dom元素
        console.log(index + '-' + item.innerHTML, this); // 0-测试一 1-测试二 2-测试三 3-测试四
    })
    // 获取当前元素在其兄弟元素中的下标
    console.log($('#btn03').index()); // 2
</script>

选择器

基本选择器

<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">DDDDD(title="hello")</li>
</ul>
<script>
  $(function () {
    // 选择id为div1的元素
    // $('#div1').css('background', 'tomato');

    // 选择所有的div元素
    // $('div').css('background', 'tomato');

    // 选择所有class属性为box的元素
    // $('.box').css('background', 'tomato');

    // 选择所有的div和span元素
    // $('div,span').css('background', 'tomato');

    // 选择所有class属性为box的div元素
    // $("div.box").css("background", "tomato");

    // 选择所有的元素
    $('*').css("background", "tomato");
  });
</script>

层次选择器

<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span>DDDDD</span></li>
  <span>EEEEE</span>
</ul>
<script>
  $(function () {
    // 选中ul下面所有的span
    // $('ul span').css('background', 'tomato');

    // 选中ul下所有的子元素span
    // $('ul>span').css('background', 'tomato');

    // 选中class为box的下一个li
    // $('.box+li').css('background', 'tomato');

    // 选中ul下的class为box的元素后面的所有兄弟元素
    $('ul .box~*').css('background', 'tomato');
  });
</script>

---

过滤选择器

<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>
  $(function () {
    //  选择第一个div
    // $("div:first").css("background", "tomato");

    //  选择最后一个class为box的元素
    // $(".box:last").css("background", "tomato");

    //  选择所有class属性不为box的div（没有class属性也可以）
    // $("div:not(.box)").css("background", "tomato");

    //  选择第二个和第三个li元素（下标大于和小于 一步一步执行 下一步过滤执行的前提是上一次过滤的结果）
    // $("li:gt(0):lt(2)").css("background", "tomato");
    // $("li:lt(3):gt(0)").css("background", "tomato");

    //  选择内容为BBBBB的li
    // $("li:contains('BBBBB')").css("background", "tomato");

    //  选择隐藏的li
    // console.log($("li:hidden").length, $("li:hidden")[0]);

    //  选择有title属性的li元素
    // $("li[title]").css("background", "tomato");

    //  选择所有属性title为hello的li元素
    $("li[title=hello]").css("background", "tomato");
  });
</script>

div {
  width: 50px;
  height: 100px;
  background-color: red;
  margin-top: 50px;
}

<div></div>
<div>div1</div>
<div>div2</div>
<div><span></span></div>
<div><p></p></div>

:empty 找到既没有文本内容也没有子元素的指定元素

$(function () {
  var $div = $("div:empty");
  console.log($div);
});

:parent 找到有文本内容或者有子元素的指定元素

$(function () {
  var $div = $("div:parent");
  console.log($div);
});

:has() 找到包含指定子元素的指定元素

$(function () {
  var $div = $("div:has('span')");
  console.log($div);
});

表单选择器

<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>
  $(function () {
    // 选择不可用的文本输入框
    // $(":text:disabled").css("background", "tomato");
    // 显示选择爱好的个数
    // console.log($(":checkbox:checked").length);
    // 显示选择的城市名称
    $(":submit").click(function () {
      alert($("select>option:selected").html());
    });
  });
</script>

工具方法

// $.each(): 遍历数组或对象中的数据
var obj = {
  name: "dudu",
  age: 22,
  setName: function (name) {
    this.name = name;
  },
};
$.each(obj, function (key, value) {
  console.log(key, value); // name dudu
});

// $.trim(): 去除字符串两边的空格
console.log("---" + $.trim("  dudu  ") + "---"); // ---dudu---

// $.type(obj): 得到数据的类型
console.log($.type(obj), $.type(obj.setName)); // object function

// $.isArray(obj): 判断是否是数组
console.log($.isArray([1, 2, 3]), $.isArray($("body"))); // true false

// $.isFunction(obj): 判断是否是函数
console.log($.isFunction(obj.setName)); // true

// $.parseJSON(json) : 解析json字符串转换为js对象/数组
var json = '{"name": "Tom", "age": 12}';
console.log($.parseJSON(json)); // Object { name: "Tom", age: 12 }
json = '[{"name": "Jerry", "age": 10}, {"name": "Tom", "age": 12}]';
console.log($.parseJSON(json));