【web】jQuery

最新推荐文章于 2024-07-12 16:55:56 发布

.山间的风

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量337

点赞数

分类专栏：小白笔记文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/weixin_46911043/article/details/127514834

版权

小白笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

jQuery

兼容低版本浏览器

是一个前端库，也是一个方法库
里面封装着一些列的方法供我们使用
优点
- 1. 优质的选择器和筛选器
  2. 好用的隐式迭代
  3. 强大的链式编程
console.log($===jQuery); //true

代码风格

$(function(){}) 匿名函数的执行

$(“#div1”) 添加内联样式

$(“#div1”).css(“color”,“red”) 添加内联样式

$==jQuery js封装好的一个对象

加载模式

window.onload

全部资源加载完毕
只能执行一次，会覆盖前面的
不能简写

$(document).ready(function(){});

DOM结构加载完毕
可多次执行
可简写$(function(){});

jq和dom互换

dom和jq可以互换

var d0k=document.getElementById(‘ok’)

console.log($(d0k));

// $KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲ok')是jq对象,$ (‘#ok’)[0]是dom对象

console.log($(‘#ok’)[0]);

选择器

基本选择器

 // console.log($===jQuery);
    console.log($("ul li"));//jQuery.fn.init(5) [li, li, li, li, li, prevObject: jQuery.fn.init(1)]  伪数组
    console.log($('ul li:nth-child(1)'));

特殊选择器

js里面没有，跳不出来

第一个、最后一个节点

console.log($(“ul li:first”));

console.log($(“ul li:last”));

索引为0 的节点

console.log($("ul li:eq(0)"));

奇数索引

console.log($("ul li:odd"));

偶数

console.log($("ul li:even"));偶数

筛选方法

非破坏性操作：this指向原来的jq对象

破号性操作：this指向新的jq对象

二次筛选

还能继续传参进行查找

指定节点

console.log($("ul li").eq(3))

寻找子级

console.log($("ul ").find("li"))//ul的所有li孩子，孙

过滤

filter()

has() 检索的是集合中DOM算的后代

裁剪

slice()

console.log($("ul li.active").nextAll(".a"))//333的后面所有中class是a的li

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li class="active">333</li>
        <li class="a">444</li>
        <li class="b">555</li>
        <li>66666</li>
        <li>77777</li>
    </ul>
</body>
<script>
       console.log($("ul li").first())//第一个
       console.log($("ul li").eq(3))//指定节点


    console.log($("ul li.active").next())//444的那个，333的下一个
    console.log($("ul li.active").next().next())//链式调用,555

     console.log($("ul li.active").nextAll(".a"))//333的后面所有中class是a的li

     console.log($("ul li.active").nextUntil(".b"))//333的下一个直到444   结果就是444
     console.log($("ul li.active").nextUntil())//444直到最后


     console.log($("ul li.active").prev())//333的前一个
     console.log($("ul li.active").prevAll())//333前面的所有
     console.log($("ul li.active").prevUntil())//333前面的，直到（）


  console.log($("ul li.active").parent())// 指定节点的父节点
console.log($("ul li.active").parents())// 指定节点的祖先节点
 console.log($("ul li.active").siblings())// 指定节点的兄弟节点（除了自己所有其他的）


console.log($("ul ").children())// 孩子节点
     console.log($("ul ").find("li"))//ul的所有li孩子，孙子


 console.log($("ul li.active").index())//获取同辈索引
</script>

属性

获取属性值

attr('title')

设置属性值

attr('title','hahahah')

同时设置多个属性值

attr({

title:‘enenen’,

style:‘background-color:red’;

});

移除属性值

removeArr('title')

添加class值

addClass('page')

移除class值

removeClass('page')

添加或移除class值

toggleClass('hah')

操作css样式

能获取也能更改

<style>
    #box{
        width: 100px;
        background-color: aquamarine;
    }
</style>
<body>
   <div id="box" style="height: 90px;"></div>
</body>
<script>
    console.log($("#box").css("width"))//获取宽度
    console.log($("#box").css("height"))//获取高宽
    console.log($("#box").css("background-color"))//获取颜色（rgb格式）
    $("#box").css("background-color","green")//更改颜色
    $("#box").css("width","8px")//更改宽度
    $("#box").css("width",800)//写法2

//隐式迭代，所有li都变色了，不管是儿子还是孙子
    $("li").css("color","blue")
//批量设置样式
  $("li:eq(3)").css({width:200,height:30,color:"yellow",backgroundColor:"blue"})

//隐式迭代，所有li都变色了，不管是儿子还是孙子
    $("li").css("color","blue")

    //隐式迭代，所有li都变色了，不管是儿子还是孙子
    $("li:eq(3)").css({width:200,height:30,color:"yellow",backgroundColor:"blue"})
</script>

样式

样式	说明
positio()	相对于父级，获取top和left值
offset()	相对于窗口，获取top和left值
scrollTop()	获取滚动的值
scrollTop(100)	设置滚动的值
scrollLeft()	获取滚动的值
scrollLeft(100)	设置滚动的值
height()	获取高度
width()	获取宽度
innerHeight()	获取高度+padding上下
innerWidth()	获取宽度+padding左右
outerHeight()	获取高度+padding上下+border上下
outerWidth()	获取宽度+padding左右+border左右