jQuery(一)

一.jQuery核心函数

1. 参数为函数：当dom加载完毕后执行此回调函数。(即jQuery的入口函数)

    $(function(){
    })

2. 参数为选择器字符串：查找所有匹配的标签，并将它们封装成jQuery对象。

   $('#div')
   $('.div')
   $('div')

3. 参数为DOM对象：将DOM对象封装为jQuery对象。

    let div=document.getElementById('#div')
    //将DOM对象转换为jQuery对象
    $(div)

4. 参数为html标签字符串（用的少）：创建标签对象并封装成jQuery对象。

   $('<h1>我是一级标题</h1>')

二.jQuery工具对象使用

1. $.each() :隐式遍历数组或者对象

   let arr=[0 1 1 2 3 4 5 6]
   $.each(arr,function(i,n){
      console.log(i,n)
   })

2. $.trim():去除两端空格

    let str='  hello  '
    console.log('----'+$.tirm(str)+'----')

三.jQuery核心对象的使用

jQuery对象是一个包含所有匹配的任意多个DOM元素的维数组对象。

基本行为：

1. size()/length:包含的DOM元素个数。
2. [index]/get(index):得到对应位置的DOM元素。
3. each():遍历包含的所有DOM元素。
4. index（）：得到在所在兄弟元素中的下标。

      <span>我是一号</span>
      <span>我是二号</span>
      <span id="three">我是三号</span>
      <span>我是四号</span>

   let $spans=$('span');
   //1.统计总共有多少个span
   console.log($spans.length,$spans.size());
   //2.取出第二个span的文本
   console.log($spans[1].innnerHTML);
   //3.输出所有span元素的文本
   $spans.each(function(){
      console.log(this.innerHTML);
   })
   //4.输出‘我是三号’span是所有span中的第几个
   //返回的是索引值  index查找的是兄弟元素中排第几
   console.log($('#three').index())

四.jQuery选择器

1. 基本选择器

• #id 选择器

• .class类选择器

• element 标签选择器

• selector1,selector2,selectorN 可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

  2.层级选择器

  <form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

//1.选中form元素下的所有input
  $("form input")
//2.选中form元素下的所有子元素input
  $("form > input")
//3.选中label下一个input
 $("label + input")
 //4.选中from的兄弟元素input
 $("form ~ input")

3.过滤选择器

   <ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li class='box'>list item 3</li>
    <li>list item 4</li>
    <li display='none'>list item 5</li>
    <li title="six">list item 6</li>
</ul>

   //1.选择第一个li
   $('li').first()
   //2.选择最后一个li
   $('li').last()
   //3.选择所有class不为box的li
   $('li').not('.box')
   //4.选择第二个和第三个li
   $('li:gt(0):lt(3)')
   //5.选择内容为list item 4的li
   $('li:contains(list item 4)')
   //6.选择隐藏的li
   $('li:hidden').show(1000)
   //7.选择有title属性的li
   $('li[title]')
   //8.选择所有title属性为six的li
   $('li[title=six]')
   //9.选择所有有title属性的且title属性不为six的li
   $('li[title!=six]')