(day05)jquery编程(什么是jquery对象+jquery选择器+jquery操作dom 增删改)

2019.08.05(day05)

jquery

jquery:是一个优秀javascript框架,一个轻量级的js库
       兼容css3,及各种浏览器
       使用户更方便的处理html,event,实现动画效果
       并且方便网站提供ajax交互
       使用户的html页面保持html和代码分离
       注意:jquery2.x开始不再支持ie6,7,8
       
    jquery的核心理念:write less,do more,写的少,做的多
    官方网站:http://jquery.com
    
jquery的编程步骤:

    1.引入jquery的js文件
    2.使用jquery的选择器,定位要操作的节点
    3.调用jquery的方法进行业务操作

什么是jquery对象:
  jquery为了解决浏览器的兼容问题而提供的一种统一
  封装后的对象描述
  jquery提供的方法都是针对jquery对象特有的,而大部分
  方法的返回类型也是jquery对象,所以方法可以连续调用(方法链)
  用法:
     jquery对象.方法().方法().方法()....
     
html中  标签, 节点 ,对象  元素
css 中  样式:   属性和值 id选择器,class选择器,元素选择器,派生选择器,伪类选择器
js  中  javascript对象  内置对象,外置对象,自定义对象 有属性,有方法体的方法
json 中   java中json对象,java中的json字符串  相互转换
          javascript中json对象,javascript的json字符串  相互转换
jquery中 jquery的对象,有属性,有方法,操作元素节点     
         jquery对象有自己的属性和方法  
         
         
jquery对象与dom对象(原生js)之间的转换
   1.dom对象-->jquery对象
     实现: $(dom对象)
   2.jquery对象-->dom对象
     实现: $obj.get(0) 或者 $obj.get()[0];
  
jquery选择器:
  jquery选择器类似于css选择器(定位元素,添加样式)
  使用jquery选择器能够将内容与行为分开
  
  jquery选择器的分类
    -基本选择器
    -层次选择器
    -过滤选择器
    -表单选择器
   
   一定要学会查jquery的api文档

基本选择器
  #id    id选择器
     特点:最快,尽量使用id选择器,最好别重复
  .class  类选择器
     特点:根据class属性定位元素,非常常用,很多的样式框架都用此样式
  element  标记选择器,html选择器,元素选择器
     特点:改变标记的默认样式
  selector1,selector2,...selectorN 合并选择器
     特点: 所有选择器的合集
  *   所有页面元素,很少使用
     特点:页面中的所有元素都适用(慎用)

层次选择器
  select1空格select2
    根据select1找到节点后,再去select1的子节点中寻找
    符合select2的节点,在给定的祖先元素下匹配所有后代元素
    特点: 很好用,重点掌握
  
  select1>select2 给定的父元素下匹配所有儿子元素
  
  select1+select2 +符号表示下一个兄弟节点
  
  select1~select2 ~符号表示下面所有的兄弟

过滤选择器:过滤选择器以":"或"[]"开始
  1.基本能过滤选择器
    :first     第一个元素
    :last      最后一个元素
    :not(selector)  把selector排除在外
    :even      挑选偶数行
    :odd       挑选奇数行
    :eq(index) 下标等于index的元素
    :gt(index) 下标大于index的元素
    :lt(index) 小表小于index的元素
        
  2.内容过滤选择器
    :contains(text)  匹配包含给定文本的元素
    :empty           匹配所有不包含子元素或文本元素
    :has(selector)   匹配含有选择器所匹配的元素
    :parent          匹配含有子元素或文本的元素
    
  3.可见性过滤选择器
    :hidden     匹配所有不可见元素,或type为hidden的元素
    :visible    匹配所有可见元素
  4.属性过滤选择器
    [attribute] 匹配具有attribute属性的元素
    [attribute=value] 匹配属性等于value的元素
    [attribute!=value]匹配属性不等value的元素
    
  5.子元素过滤选择器
    :nth-child(index/even/odd) 将为每一个父元素匹配子元素,
                  index是从1开始的整数,表示对应的子元素
    :eq(index) 匹配一个给定索引的元素,index从0开始的整数
    
  6.表单对象属性过滤选择器
    :enabled
    :disabled
    :checked
    :selected
  

表单选择器 
   :input
   :text
   :password
   :radio
   :checkbox
   :submit
   :reset
   :button
   :file
   :hidden

jquery操作dom 增删改
  
  创建dom节点
  //js原生写法
      var div_ele=document.createElement("div");
      var txt_node=document.createTextNode("hello");
      div_ele.appendChild(txt_node);
      document.body.appendChild(div_ele);
  //jquery写法:
      语法:$(html)
      如果创建一个div,并添加到body的最后一个节点
      var $obj=$("<div>hello</div>");
      $("body").append($obj);
      等价于:
      $("body").append("<div>hello</div>");

  插入节点的若干方法
    append()  作为最后一个子节点添加进来
    prepend() 作为第一个子节点添加进来
    after()   作为下一个兄弟节点添加进来
    before()  作为上一个兄弟节点添加进来
  删除节点
    remove()  移除
    remove(selector)  按照选择器定位后删除
    empty()   清空节点
    
  复制节点
    clone()   克隆
    clone(true) 复制节点也具有行为(将处理一并复制)
    
  样式操作:
    attr("属性名","属性值")  获取或设置属性  
    addClass("类样式名")     追加样式
    removeClass("类样式名")  移除样式
    toggleClass("类样式名")  切换样式
    hasClass("类样式名")     是否有某个样式
    css("样式名")            获取样式的值
    css("样式名","样式值")     设置多个样式
 
  遍历节点:
    children()/children(selector)  只考虑直接子节点
    next()/next(selector)          下一个兄弟节点
    prev()/prev(selector)          上一个兄弟节点
    siblings()/siblings(selector)  其他兄弟
    find(selector)  查找满足选择器的所有后代
    parent()        父节点