首页 前端知识 jQuery笔记

jQuery笔记

2024-05-03 18:05:51 前端知识 前端哥 608 727 我要收藏

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 绑定多个事件 (两种)
    1. 元素.on({ })
    $('div').on({
        click: function () {
             $(this).css('background', 'orange')
        },
        mouseenter: function () {
             $(this).css('background', 'purple')
        },
        mouseleave: function () {
             $(this).css('background', 'blue')
        }
    })
    
    1. 元素.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’) *解绑事件委托

    自动触发事件

    1. 元素.事件()
    $("div").click(); // 会触发元素的默认行为
    
    1. 元素.trigger(“事件”)
    $("div").trigger("click"); // 会触发元素的默认行为
    
    1. 元素.triggerHandler(“事件”)
    $("a").triggerHandler("click");  // 就是不会触发元素的默认行为
    

    事件对象

    event 或 e
    $('div').on('click', function (e) {
          console.log(e);
    })
    
    e.stopPropagation() // 阻止冒泡
    e.preventDefault() // 阻止默认行为 或用 return false;
转载请注明出处或者链接地址:https://www.qianduange.cn//article/6836.html
标签
评论
发布的文章

安装Nodejs后,npm无法使用

2024-11-30 11:11:38

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!