总结-jQuery

时间:2023-01-05 19:21:52

一、ajax提交,如果某个变量的值填的是doc对象,jQuery不报错,也没有反应,如: {userName : $('#userName')}。正确的写法 {userName : $('#userName').val()}

1、选择器selector
  1)基本选择器
    #id
    .class
    element
    selector1,selector2..selectorn
    *
  2)层次选择器
    selector1 selector2 : 后代
    selector1>selector2 : 只考虑子节点
    selector1+selector2: 下一个兄弟
    selector1~selector2: 下面所有的兄弟
  3)过滤选择器 
    (1)基本过滤选择器
      :first
      :last
      :not(selector)
      :even偶数的
      :odd奇数的
      :eq(index)(0,1,2,3。。。)
      :gt(index) index右边所有的
      :lt(index) index左边所有的(自己显然不在范围内,不解释)
      示例:$('table tr:eq(0~n) td:eq(0~n)').css('color','red');//某一行的某一列
    (2)内容过滤选择器
      :contains(text) 匹配包含给定文本的元素
      :empty 匹配所有不包含子元素或者文本的空元素
      :has(selector) 匹配含有选择器所匹配的元素的元素
      :parent 匹配含有子元素或者文本的元素
    (3)可见性过滤选择器
      :hidden 匹配所有不可见元素,或者type为hidden的元素
      :visible 匹配所有的可见元素
    (4)属性过滤选择器
      [attribute]
      [attribute=value]
      [attribute!=value]
    (5)子元素过滤选择器
      :nth-child(index/even/odd) (下标从1开始,不是0,这是个例外)
    (6)表单对象属性过滤选择器
      :enabled
      :disabled
      :checked
      :selected
    5)表单选择器   
      :input  input,textarea,select,button
      :text
      :pasword
      :radio
      :checkbox
      :submit
      :image
      :reset
      :button
      :file
      :hidden
2、dom操作(核心)
  1)查询:找到一个节点以后,可以通过以下四个方法来访问节点的html内容、文件内容、属性值、值。
    a.html(): 访问节点的html内容
    b.text():访问节点的文本内容
    c.attr():访问节点的属性
    d.val():访问节点的值
    以上方法均可以查询或者修改相应的值。
  2)创建
    $(html);
  3)插入节点
    append():作为最后一个孩子追加
    prepend():作为第一个孩子追加
    after():作为下一个兄弟追加
    before():作为上一个兄弟追加
  4)删除节点
    remove()
    remove(selector)
    empty():清空节点
  5)将javascript代码与html代码分离
    $(function(){
      //当整个页面加载完毕,会执行这儿的代码。
    });
  6)复制节点
    clone()
    clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
  7)属性操作
    读取:attr('');
    设置: attr('','') 或者一次
    设置多个 attr({"":"","":""});
    删除:removeAttr('')
  8)样式操作
    获取和设置: attr("class",""),attr("style","")
    追加:addClass('')
    移除:removeClass('')
    或者removeClass('s1 s2')
    或者removeClass()//会删除所有样式
    切换样式:toggleClass,有该样式,就删除,没有,就添加。
    是否有某个样式 hasClass('')
    读取css('')
    设置css('','')或者
    css({'':'','':''})//设置多个样式
  9)遍历节点
    children()/children(selector)只考虑子元素,不考虑其它后代元素。
    next()/next(selector)下一个兄弟
    prev()/prev(selector)上一个兄弟
    siblings()/siblings(selector)其它兄弟
    find(selector):查找所有的后代,并且后代要满足selector的要求。
3、事件处理
  1)回顾之前的事件处理知识
    a.绑订事件处理代码
      方式一:绑订到html标记 <input type="button" onclick="f1();"/>
      方式二: 绑订到dom对象 obj.onclick=f1;
    b.如何获得事件对象
      给事件处理函数添加一个参数"event" 
    c.事件对象有什么作用
      作用1:依据事件对象找到事件源 
        event.srcElement   //ie
        event.target  //ff chrome
      作用2:获得鼠标点击的坐标
        event.clientX
        event.clientY
      作用3:取消冒泡
        event.cancelBubble=true;
    d.事件冒泡:子节点产生的事件会抛给相应的父节点。
    
  2)在jQuery当中,如何处理事件
    a.绑订事件处理代码
      方式一:$obj.bind(事件类型,处理函数);如:$obj.bind('click',fn1);
      方式二:$obj.click(fn1);
    b. 如何获得事件对象:只需要给事件处理函数传递一个参数
      $obj.click(function(e){}); // e就是事件对象(是jQuery对底层的事件对象的封装)。
    c.事件对象有什么作用
      作用1:依据事件对象找到事件源
        //obj是一个dom对象。
        var obj = e.target;
      作用2:获得鼠标点击的坐标 
        e.pageX
        e.pageY
      作用3:取消冒泡
        e.stopPropagation();
    d.合成事件
      hover(mouseenter,mouseleave): 第一个函数处理光标进入,第二个函数处理光标移出。
    e.模拟操作
      方式一:简写形式,比如:$obj.focus();
      方式二:正式写法 $obj.trigger('focus'); $obj.trigger('click');(触发点击事件)
4、动画
  1)show() hide()
    a.作用:通过同时改变元素的宽度与高度来实现显示或者隐藏
    b.用法:
      show(时间,[callback]);
      时间:单位可以是"slow","normal","fast"或者毫秒数。
      callback:回调函数,当整个动画执行完毕,接下来会调用回调函数。
  2)slideUp() slideDown()
    a.作用:通过改变元素的高度来实现显示或者隐藏
    b.用法同上。
  3)fadeIn() fadeOut()
    a.作用:通过改变元素的不透明度来实现显示或者隐藏。
    b.用法同上。
  4)自定义动画 animate(params,speed,[callback])
    用法:
      params: 是一个javascript对象,描述动画结束之后元素的样式。
      speed:速度,单位是毫秒。
      callback:回调函数,当整个动画执行完毕,接下来会调用回调函数。
5、操作类数组的方法:
  1)each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jQuery对象。i表示正在被迭代的对象的下标(从0开始)。
  2)eq(index):返回index+1位置处的jQuery对象
  3)index(obj):返回下标,其中obj可以是dom对象或者jQuery对象。
  4)length属性:jQuery对象包含的dom对象的个数
  5)get():返回dom对象组成的数组
  6)get(index):返回index+1个dom对象。