jQuery笔记

jQuery

jQuery 对象 返回的是伪数组形式

$(‘div’) 获取节点

$(‘div’).hide() 隐藏

$(‘div’).show() 显示

$(‘video’)[0].play() 自动播放

跳转页面

$('元素名').on('click',function(){self.location.href='新地址.html'})

$(‘video’)[索引号]

*.play() 是原生 js 中的方法、jQuery 对象无法直接使用需装换成 DOM 对象

$(function () {   
    $('div').hide()    
    $('div').show()    
})

jQuery 对象和 DOM 对象转换

用 $ 直接获取的就是 jQuery 对象

$(‘video’)[0] *jQuery 对象转换成 DOM 对象

$(‘video’).get(0) *jQuery 对象转换成 DOM 对象

jQuery 选择器

基础选择器

$(‘#id’) 获取指定 id 的元素

$(‘*’) 获取所有

$(‘.class’) 获取 class 类名的元素

$(‘div’) 获取所有 div

$(‘div,p,li’) 选取多个元素

$(‘li.current’) 交集元素

层级选择器

$(‘ul>li’) 获取亲儿子层级的元素

$(‘ul li’) 获取 后代所有的 li 包括孙子

$(“ul[ 属性 =‘属性值’]”) 根据孩子属性获取

隐式迭代

$(“div”).css(“background”,“pink”);

* 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加 css 这个方法

筛选选择器

$(“ul li:first”) 获取第一个 li

$(“ul li:last”) 获取最后一个

$(“ul li:eq( 索引号)”) 获取索引号的那个 li

$(“ul li:odd”) 获取索引号为奇数的 li

$(“ul li:even”) 获取索引号为偶数的 li

层级筛选

$(“li”).parent() 查找父级

$(“li”).parents(‘名字’) 查找父及以上 祖先级 需要写要找的元素名

$(‘ul’).children(‘li’) 查找最近一级的儿子 相当于子代选择器

$(‘li’).find(‘div’) 查找所有 div 后代 相当于后代选择器

$(“ul .item”).siblings(“li”) 查找除了自身元素之外的所有亲兄弟

$(‘li’).eq(2) 查找索引号为的那个 li

$(“. 类名”).nextAll() 查找当前元素之后的所有同辈

$(“. 类名”).prevAll() 查找当前元素之前的所有同辈

$(“div”).hasClass(“current”) 检查这个元素有没有 这个类名，有则返回 true

样式、类名操作

 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});

$(this).index() 获取索引号

$(“div”).addClass(“current”); 添加类名

$(“div”).removeClass(“current”); 删除类名

$(“div”).toggleClass(“current”); 切换类名

动画效果

显示隐藏

.show() 显示

. hide() 隐藏

. toggle() 切换

滑动

.slideDown(); 滑入

.slideUp(); 滑出

.slideToggle(); 切换滑动

淡入淡出

.fadeIn(1000); 淡入

.fadeOut(1000); 淡出

.fadeToggle(1000); 淡入淡出切换

.fadeTo(1000, 0.5); 修改透明度

// 修改透明度 fadeTo() 这个速度和透明度要必须写

自定义动画

.animate({})

$(function() {
    $("button").click(function() {
         $("div").animate({
             left: 500,
             opacity: .5,
             width: 500,
         }, 10000);
    })
})

停止动画排队

.stop() * 写在动画前面

$(".nav>li").hover(function() {
     
     $(this).children("ul").stop().slideToggle();
});

属性操作

获取固有属性

.prop(‘‘属性名’’) 获取属性值

.prop(‘‘属性名’’,‘‘属性值’’) 更改属性值

$("a").prop("title", "我们都挺好");
// prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。

获取自定义属性

.attr(‘‘属性名’’) 获取属性值

.attr(‘‘属性名’’,‘‘属性值’’) 更改属性值

$("div").attr("data-index", 4);
// 可以读取 HTML5 自定义属性  data-index，得到的是数字型。

数据缓存

.data(‘属性名’,‘属性值’) 附加数据

.data(‘属性名’) 获取数据

$("span").data("uname", "andy"); //  附加数据
$("span").data("uname);     // 获取数据
$("div").data("index")
// 这个方法获取 data-index h5 自定义属性 不用写 data- 而且返回的是数字型

内容操作

.html() 获取元素内容 // 对应 JS 中的 innerHTML

.html(‘内容’) 设置元素内容

.text() 获取元素文本内容 // 对应 JS 中的 innerText

.text(‘内容’) 设置元素文本内容

.val() 对应 JS 中的 value

元素操作

.each() 方法遍历元素

.each(function(i, domEle) {})

// 第一个参数是索引号 可以自己指定索引号号名称

// 第二个参数一定是 dom 元素对象 也是自己命名

var sum = 0
var arr = ['red', 'pink', 'orange']
$('div').each(function (i, div) {sum += parseInt(div.innerHTML)
    $(div).css('color', arr[i])
})
console.log(sum);

$.each() 方法遍历元素 主要用于遍历数据，处理数据

$.each(遍历谁, function(i, ele) {})

$.each(arr, function(i, ele) {    // 遍历数组
     console.log(i); // 索引
     console.log(ele);  // 值
})

$.each({    // 遍历对象
       name: "andy",
       age: 18
}, function(i, ele) {console.log(i); // 输出的是 name age 属性名
       console.log(ele); // 输出的是 andy  18 属性值
})

创建、添加、删除元素

创建

var li = $(“

• 我是后来创建的 li
• ”);
  

  添加

  .append(li)

  .prepend(li)

  $("ul").append(li);  // 内部添加并且放到内容的最后面 
  $("ul").prepend(li); // 内部添加并且放到内容的最前面
  

  var div = $("
   我是后妈生的 
  ");
  $(".test").after(div);    // 外部添加放到目标的后面
  $(".test").before(div);   // 外部添加放到目标的前面 
  

  删除

  .remove() 删除元素

  .empty(); 可以删除元素里面的子节点 孩子

  .html(‘’) 可以删除元素里面的子节点 孩子

  $("ul").remove();   // 可以删除匹配的元素 自杀
  $("ul").empty();    // 可以删除匹配的元素里面的子节点 孩子
  $("ul").html("");   // 可以删除匹配的元素里面的子节点 孩子
  

  尺寸操作

  .width()

  // 获取设置元素 width 和 height 大小

  .innerWidth()

  // 获取设置元素 width 和 height + padding 大小

  .outerWidth()

  // 获取设置元素 width 和 height + padding + border 大小

  .outerWidth(true)

  获取设置 width 和 height + padding + border + margin

  • 括号里为空，则是获取相应值，返回数字型
  • 括号里写数字，则是修改相应的值

  位置操作

  .offset() 返回相对于文档的距离

  console.log($('.son').offset());  // 返回一个对象 距离文档页面的距离
  console.log($('.son').offset().top);  // 返回距离文档的距离
  $('.son').offset({  // 可以更改距离
      top:500,
      left:500
  })
  

  .position() 返回相对于有定位的父元素的距离

  console.log($('.son').position()); 
  // 如果找不到有定位的父元素 则相对于文档，* 不可更改
  

  .scrollTop() 页面被卷去的顶部距离

  .scrollLeft() 页面被卷去的左侧距离

  $(document).scrollTop()  
  

  绑定事件

  on 绑定多个事件 (两种)

  1. 元素.on({})

  $('div').on({
      click: function () {
           $(this).css('background', 'orange')
      },
      mouseenter: function () {
           $(this).css('background', 'purple')
      },
      mouseleave: function () {
           $(this).css('background', 'blue')
      }
  })
  

  2. 元素.on(‘事件 1 事件 2’，function () {执行内容}) * 和 hover 类似

  $('div').on('mouseenter mouseleave', function () {$(this).toggleClass('current')
    })
  

  one 绑定事件 * 只触发一次

  $("p").one("click", function() {alert(11);
   })
  

  on 事件委托

  * 可以给未来动态创建的元素绑定事件

  
  $('ol').on('click', 'li', function () {
       console.log(22);
  }) 
  
  var li = $("
   我是后来创建的 
  ")
  $('ol').append(li)
  

  事件解绑

  $(‘div’).off() * 解绑全部事件

  $(‘div’).off(‘click’) * 只解绑点击事件

  $(‘ul’).off(‘click’,‘li’) * 解绑事件委托

  自动触发事件

  1. 元素. 事件 ()

  $("div").click(); 
  

  2. 元素.trigger(“事件”)

  $("div").trigger("click"); 
  

  3. 元素.triggerHandler(“事件”)

  $("a").triggerHandler("click");  
  

  事件对象

  event 或 e

  $('div').on('click', function (e) {
        console.log(e);
  })
  

  e.stopPropagation() // 阻止冒泡

  e.preventDefault() // 阻止默认行为 或用 return false；