jQuery笔记

jQuery

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

$(‘div’) 获取节点

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

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

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

跳转页面

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

$(‘video’)[索引号]

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

$(function () {   // DOM加载完成后 在执行内部代码
    $('div').hide()    // 是 jquery 封装好的 隐藏方法 
    $('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() {
     // stop 方法必须写到动画的前面
     $(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 = $("<div>我是后妈生的</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 绑定多个事件 (两种)

元素.on({ })

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

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

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

one 绑定事件 * 只触发一次

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

on 事件委托

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

//click 是绑定在ol 身上的，但是 触发的对象是 ol 里面的小li
$('ol').on('click', 'li', function () {
     console.log(22);
}) 
// 可以给未来动态创建的元素绑定事件
var li = $("<li>我是后来创建的</li>")
$('ol').append(li)

事件解绑

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

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

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

自动触发事件

元素.事件()

$("div").click(); // 会触发元素的默认行为

元素.trigger(“事件”)

$("div").trigger("click"); // 会触发元素的默认行为

元素.triggerHandler(“事件”)

$("a").triggerHandler("click");  // 就是不会触发元素的默认行为

事件对象

event 或 e

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