JQ选择器

1. 首先要引入一个jq插件，可以是在线的，也可以下载到本地使用（可以去JQ官网）

2. 简单的介绍一下**

• 先说明一下 $() JQ返回的是一个对象

• js转换为jq

  $(获取js的标签值（js对象）).html('js--->jq') ;

  js对象 . innerHTML= ' js--->jq ' ;

• jq转换为js

  $ (' 获取的jq的对象 ').innerHTML= ' jq-->js '

  $ (' 获取的jq的对象 ')[下标].innerHTML= ' jq-->js '

  $ (' 获取的jq的对象 ').get(下标).innerHTML=' jq-->js ' ;

• jq中的点击事件
  js中的点击事件要加个on,如"onclick","oninput"等，在jq中不用加on，可以直接写成"click","input"等

    $('button').click(function(){
            alert(111);//-->获取body中的button标签，并点击时，弹出111；
      })

• jq中的样式

        $('button').css({color:'red',background:'orange'});//-->可以写多个样式
        $('button').css('color','red')//--->只能写单个的样式

• 基本选择器
  a. id选择器 =====$(' #id ')==标签中的id

  b. 类选择器=====$(' .class ')==标签中的class名

  c. 元素选择器=====$( ' div ')==这是页面中所有的div标签

  d. 全局选择器=====$(' * ')==匹配页面中的所有元素

  e. 群组选择器=====$( ' ul,ol ')==页面中所有的ul下和ol

  f. 后代选择器=====$(' div li ')==页面中的div下的ul或ol所有的儿子及孙子等li都有用（包括里面嵌套的ol的li）

  g. 子代选择器=====$(' div>ul>li ')==页面中div下的ul的儿子li有用，孙子等都没用

  h. 相邻元素选择器（+）=====$(' ul+ol ')==找到ul的下一个元素ol==相当于next('ol')

  i. 兄弟元素选择器（~）=====$(' ul~p ')==ul下面的所有p标签元素==相当于nextAll('p')

• 标签过滤器

  1. $('ul li:first').css('color','red')==匹配到第一个ul元素中的第一个li,字体变红

  2. $('ul li:first-child').css('color','red')==匹配到所有ul元素中的第一个li，字体变红

  3. $("li:not('.a')").css('color','red')==匹配到class类名不是a的所有的li,字体变红

  4. $("li.a").css('color','red')==匹配到class类名为a的所有的li,字体变红

  5. $(".a").css('color','red')==匹配到所有class类名为a的元素，子体变红

  6. $(":not(.a)").css('color','red')==这里不怎么好用，有继承

  7. $("li:gt(1)").css('color','red')==使下标大于1的所有的li，字体变红

  8. $("li:lt(1)").css('color','red')==使下标小于1的所有的li，字体变红

  9. $("li:even").css('color','red')==匹配所有li的下标为偶数的字体变红，行数为奇数

  10. $("li:odd").css('color','red')==匹配所有li的下标为奇数的字体变红，行数为偶数

  11. $(":header").css('color','red')==匹配所有的标题元素如：h1-->h6

  12. $("li:gt(2)").animate({fontSize:'30',opacity:'.5'},1000)==匹配到下标大于2的所有的li一秒后字体变大，透明度为0.5

• 内容过滤器

  1. $('li:contains(2)').css('color','red')==匹配到内容包含2的所有的li,字体变红

  2. $('p:empty').css({width:'40',height:'40',background:'red'})==匹配到为空的p标签，并设置样式

  3. $('b:has(p)').css('color','red')==匹配到b标签中是否有p标签，并字体变红

  4. $('p:parent').css('color','red')==匹配到不为空的P标签，字体变红

• 可见性过滤器

  1. $('li:hidden').css({color:'green',display:'block'})==匹配li中所有隐藏的元素，并设置字体为绿色，并让他显示

  2. $('li:visible').css({color:'green'})==匹配li中所有可见的元素，字体为绿色

• 属性选择器
  a. $(' [type=text]')==匹配表单类型为文本的

  b. $('[id]').css("color","yellow")==匹配拥有id属性名的所有元素，字体为黄色

  c. $('[id=a]').css("color","yellow")==匹配id等于a的元素，字体为黄色

  d. $('[id!=a]').css("color","yellow")==匹配id不等于a的元素，字体为黄色，不建议用

  e. $('[id^=a]').css("color","yellow")==匹配id等于a开头的属性值‘a_b等’，字体变黄

• 表单选择器

  1. :input======匹配所有的input框

  2. :button=====匹配所有的button按钮

  3. :text=======匹配所有的文本

  4. :radio======匹配所有的单选

  5. :checkbox ====匹配所有的多选框

  6. :checked======匹配所的默认

  7. removeclass()====删除class类名

• JQ高级选择器
  a. 对象.html()====括号里啥也不写，获取内容，包含标签的，括号里写内容，就是设置了
  b. 对象.text()=====同上，获取内容，不包含标签
  c. find()=========找到当前元素的子代及后代等
  d. children()=====找到当前元素的子代
  e. parent()======找到当前元素的第一个父元素，不管找不找的到，都不会在继续往上找
  f. parents()===== 找到当前元素的所有父元素，不传参时，默认找到上一级父元素
  g. closest()=====找到当前元素的所有父元素，必须传参
  h. next()=======找到当前元素的下一个相邻的元素
  i. nextAll()=====找到当前元素下的所有相邻的兄弟元素
  j. prev()=======找到当前元素的上一个相邻的兄弟元素
  k. prevAll()====找到当前元素的前面的所有元素
  l. siblings()====找到当前元素的所有兄弟元素
  m. first()或first-child()===匹配当前元素的第一个元素
  n. index====获取当前操作对象的下标
  o. eq()=====获取该下标对应的元素
  p. show()==显示 ==== hide()===隐藏
  q. addclass()=====添加class类名
  r. last()========匹配当前元素的最后一个元素

  写的不是太全，见谅！！！