jQuery基础笔记（1）

最新推荐文章于 2023-02-23 21:39:11 发布

自律并放纵者

最新推荐文章于 2023-02-23 21:39:11 发布

阅读量166

点赞数 1

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/qq_45689637/article/details/109492915

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jquery基础知识：

$( ):里面可以写css选择器，原声dom，jquery对象，null/undefined，函数function，selector/content等
jquery特有的选择规则（选出的是jquery对象）
1. $(‘ul>li:first’);//第一个子标签
2. $(‘ul>li:eq(2)’);//下标为2的元素
3. $(‘ul>li:odd’);//下标为奇数的元素；
4. $(‘ul>li:even’);//下标为偶数的元素；
1. filter(’.box/[title=hello]’);//筛选
2. has():$('li').has('p').css('color','red');==>标红的是拥有‘p’标签的li元素；
3. find():$('li').find('p').css('color','red');==>标红的是li元素里的p标签；
4. eq():类似于$('ul>li:eq(2)')；
5. not()
6. is()–>true/false;
css()取值相当于getComputed,赋值相当于dom.style.***;
1. attr()相当于getAttribute()或setAttribute();例如：<li class="dom" md="hs"></li>-->$('.dom').attr('md')返回值为hs;<li class="dom"></li>-->$('.dom').attr('md','hs')会在li标签里加一个md="hs"属性。
2. prop()主要依赖的则是js中原生对象属性获取和设置方式。
3. 对于那种属性名等于属性值的属性如：checked，selected，disabled，用attr()会返回其对应的属性值，但prop()会返回true/false，从而进行实时监控的状态。
dom=$('div');就相当于dom=getElementsByTargeName("div");因此$('div')得到的就是一个dom对象，若想使用jquery的方法就得转为jquery对象即$($('div'))；
1. next();下一个兄弟节点；
2. prev();上一个兄弟节点；
3. index();当前兄弟节点中的索引；
addClass(‘active’). removeClass(). 参数可以是function
1. A.insertBefore(B):A插入到B的前面（有剪切功能）
2. B.before(A):B的前面是A；（有剪切功能）
3. C.appendTo(D):C插到D的里面
4. D.append©:D里添加C；
5. prependTo/prepend添加到第一个元素前
6. remove，detach把元素删除后返回（二者不同之处：remove删除之后其对应的事件也随之删除，而detach删除元素之后事件仍在）；
  例如：点击删除并恢复小案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>remove与detach区别</title>
    <style>
        .wrapper{
            height:300px;
            width:600px;
            background-color: black;
        }
        .iteam1{
            height:100px;
            width:100px;
            background-color: cornflowerblue;
        }
        .iteam2{
            height:100px;
            width:100px;
            background-color:#fff;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="iteam1">
        </div>
        <div class="iteam2">
        </div>
        <p></p>
    </div>
    <script src="jquery-3.5.1的副本.js"></script>
    <script>
        $('p').append('p').css("color","red");
        $('.iteam1').click(function(){
            iteam1=$(this).remove();
        })
        $('.iteam2').click(function(){
            iteam2=$(this).detach();
        })
        $('p').click(function(){
            $('.wrapper').prepend(iteam2).prepend(iteam1);
        })
    </script>
</body>
</html>

绑定事件:.on（）：div.click()类似于原声js的div.onclick事件；div.on(‘click’,‘a’,{name:‘yt’},function(e){})类似于原声js的div.addEventListener(‘click’,function(){});不同之处是jquery的这个方法可以多传两个参数，其中第二个参数是事件元对象，第三个参数(可以是对象，也可以是一个字符串或数组。。)，当事件触发式即可调用第三个参数;注意：当只有三个参数的时候，而第二个参数传的是个字符串，这是应注意这个字符串不要和事件元的字符串冲突，也就是计算机很有可能把你传的字符串识别为事件元对象，由于找不到该事件元很有可能因此出发不了事件。例如：div.on(‘click’,‘a’,function(e){})
解绑事件:.off();也可以传事件元参数，函数事件。
若只想绑定一次事件执行完立即解绑可使用：.one();
jquery创建一个标签方法：

$('<div class="item"></div>');或着$('<div class="item">')或者$('<div class="item"/>');

1. scrollTop():滚轮滚出去的高度：$(window).scrollTop();
2. innerWidth():宽度：content，padding；
3. outerWidth():宽度：content，padding，border；
4. outerWidth(true):宽度：content，padding，border,margin；
5. width():content;

自律并放纵者

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基础笔记（1）

jquery基础知识：$( ):里面可以写css选择器，原声dom，jquery对象，null/undefined，函数function，selector/content等jquery特有的选择规则（选出的是jquery对象）$(‘ul>li:first’);//第一个子标签$(‘ul>li:eq(2)’);//下表为2的元素$(‘ul>li:odd’);//下表为奇数的元素；$(‘ul>li:even’);//下表为偶数的元素；filter(’.box/
复制链接

扫一扫