jquery操作

1、给一个元素绑定多个事件的写法

1）可以把事件名字写在一起，用空格隔开

$(dom).on("click focus",
        function() {
        
        }
)；

2）可以采用串联的写法

$(dom).on({
        click:function(){
           
        },
        focus:function(){
            
        }
});

3）当然也可以分开写

$(dom).on('click',function () {
    
});
$(dom).on('focus',function () {
    
})

2、给一个元素添加或者删除多个类的写法

把要添加或者移除的类名字写在一起，用空格隔开

$(dom).addClass(class1 class2 class3 )
$(dom).removeClass(class1 class2 class3 )

3、jquery获取元素

1）获取包含同样的类的元素：（交集）

$(".class1.class2")--选择同时包含class1和class2的元素。

2）获取包含同样的类的元素：（并集）

$(".class1，class2")--选择同时包含class1或者class2的元素。

3）获取具有好几个属性的元素，比如获取一个id为aa，value为bb的input

$("input[id='aa'][value='bb']")

4）jquery选择器中加变量参数

比如：
$("#"+id)
$(this).siblings('.'+disTrId)

5）css选择器和jq选择器
CSS选择器找到元素后为设置该元素的样式，jQuery选择器找到元素后添加行为。

css选择器选择元素first-child、last-child、nth-child(n) p:first-child
对应jq的first()、last()、eq(n)方法
比如需要需要在jq选择器中加动态参数的时候就适合用jq方法来获取
$("."+disTrId).first()而不是$("."+disTrId+':first-child')

4、jQuery 事件

1） mousedown、mouseup、click事件之间的关系及执行顺序

这里转自：https://blog.csdn.net/cccmercy/article/details/80775540

三个事件的触发时机

• mousedown
• 当鼠标指针移动到元素上方，并按下鼠标按键（左、右键均可）时，会发生 mousedown 事件。 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
• mouseup
• 当在元素上松开鼠标按键（左、右键均可）时，会发生 mouseup 事件。 与 click 事件不同，mouseup 事件仅需要松开按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
• click
• 当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click 事件。 注意：触发click事件的条件是按下并松开鼠标左键！，按下并松开鼠标右键并不会触发click事件。

  三个事件的触发顺序

• 若在同一个元素上按下并松开鼠标**左键**，会依次触发mousedown、mouseup、**click**，前一个事件执行完毕才会执行下一个事件
• 若在同一个元素上按下并松开鼠标**右键**，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件

• 2）triggerHandler() 方法

  定义和用法

  triggerHandler() 方法触发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。

  triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

  与 trigger() 方法相比的不同之处

  • 它不会引起事件（比如表单提交）的默认行为
  • .trigger() 会操作 jQuery 对象匹配的所有元素，而 .triggerHandler() 只影响第一个匹配元素。
  • 由 .triggerHandler() 创建的事件不会在 DOM 树中冒泡；如果目标元素不直接处理它们，则不会发生任何事情。
  • 该方法的返回的是事件处理函数的返回值，而不是具有可链性的 jQuery 对象。此外，如果没有处理程序被触发，则这个方法返回 undefined。

  5、jquery获取元素类名和元素名

  1）jquery获取元素的属性值的方法

  attr:更多用在自定义属性上面。
  1、$(“元素”).attr(“属性”); //获取指定属性的值

  2、$(“元素”).attr(“属性”,“属性值”);//设置属性值

  3、$(“元素”).removeAttr(“属性”); //移除指定属性

  prop:一般用于元素自带属性，比如input的checked ，a的id和href属性等。
  1、$(“元素”).prop(“属性”); //获取指定属性的值

  2、$(“元素”).prop(“属性”,“属性值”);//设置属性值

  2）jquery获取元素类名

  获取className：$(dom).attr("class"),可以用split(" ")进行分割
  判断是否有某个className：$this.hasClass('类名字')：true有；false无
  判断是否有类名为up的元素：$(this).parent().find(".类名字").size()：0无；>0有
  

  如果获取的元素没有类名的话，它返回的是undefined.

  3）jquery获取元素元素名

  $(dom).prop("tagName") 
  【返回值为大写的，转化： $(dom).prop("tagName").toLowerCase()】
  

  注意：
  $(dom).attr(“className”)
  $(dom).tagName
  这种写法都会报undefined，因为这都是原生的属性。

  6、jquery获取元素其他属性值

  1）jquery获取元素颜色

  var color = $(dom).css("color");
  

  返回值是rgb格式，默认值为rgb(0,0,0)，需要注意的是color的字符长度为12，因为rgb(0,0,0)的中间有两个空格。
  rgb转换为16进制的方法：

  function rgbToHex(rgb) {
          rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
          function hex(x) {
              return ("0" + parseInt(x).toString(16)).slice(-2);//转成十六进制
          }
          return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
      }
  

  2）jquery获取元素的各种高度
  获得的是该div本身的高度(不包含padding,margin,border)：

  $(dom).height();   
  

  包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)：

  $(dom).outerHeight(); 
  

  包含该div本身的高度, 以及padding,border,margin上下的总高度：

  $(dom).outerHeight(true); 
  

  7、jquery选择器

  1）：contains 选择器选取包含指定字符串的元素
  语法：

  $(":contains(text)")
  

  该字符串text可以是直接包含在元素中的文本，或者被包含于子元素中；
  如果不借助class等属性，contains这个选择器很有优势。
  比如选择所有包含 “is” 的 p元素：

  $("p:contains(is)")
  

  又比如在某一个元素里里找一个li，li的内容是a：

  $("元素").find("li:contains(默认专题)")
  

  2）：hidden 选择器选取隐藏的元素
  语法：

  $(":hidden")
  

  以下几种情况的元素是隐藏元素：{

  → 设置为 display:none
  → 带有 type=“hidden” 的表单元素
  → width 和 height 设置为 0
  → 隐藏的父元素（这也会隐藏子元素）

  ✖ 该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用
  }

  8、jquery获取兄弟节点和子节点

  1）兄弟节点

  $(dom).siblings()                //当前元素所有的兄弟节点
  $(dom).siblings(“兄弟节点名字”)    //可以找到指定的兄弟节点
  $(dom).prev()                    //当前元素前一个兄弟节点
  $(dom).prevaAll()                //当前元素之前所有的兄弟节点
  $(dom).next()                    //当前元素之后第一个兄弟节点
  $(dom).nextAll()                 //当前元素之后所有的兄弟节点
  $(dom).siblings().last();    //获取最后一个兄弟节点
  

  2）子节点

  > ：比如$("ul > li")查找ul下的所有li
  $(dom).children(selector)
  $(dom).find(selector)
  

  区别：
  children方法获得的仅仅是元素下一级的子元素；find方法获得所有下级元素
  children方法的参数selector 是可选的,用来过滤子元素; find方法的参数selector方法是必选的。

  3）补充

  • find(“dd”) : jquery对象
    find(“dd”)[0]：dom对象（children同理）
    类似的还有$.each(function(elem){elem是dom对象})
  • eq() 方法返回带有被选元素的指定索引号的元素
    -索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

  所以：$(jquery.find(“dd”)[0])和jquery.find(‘dd’).eq(0) 同效

  9、jquery获取滚动条的高度

  • 获取某元素内滚动条的高度：$(dom).scrollTop()
  • 设置某元素内滚动条的高度：$(dom).scrollTop(90)
  • 获取页面滚动条的高度：$(document).scrollTop()

  10、jquery获取div距离父级dv的距离

  • div没定位时距离父级的距离：$(dom).offset().top / left
  • div有定位时距离父级的距离：$(dom).position().top / left【div有定位，绝对定位】