jquery知识点集

最新推荐文章于 2024-07-11 20:55:36 发布

喜乐ll

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量242

点赞数

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

本文链接：https://blog.csdn.net/m0_63341952/article/details/122903792

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

语法

基础语法： $(selector).action()

选取元素

$("p:first")               选取第一个<p>元素
$("ul li:first")           选取第一个ul元素的第一个<li>元素
$("ul li:first-child")     选取每一个ul元素里面的第一个li元素
$("[href]")                选取带有href属性的元素
$("tr:even")               选取偶数位置的<tr>元素
$("tr:odd")                选取奇数位置的<tr>元素

效果

隐藏and显示

<body>
    <div>熊大熊大救救俺</div>
    <button id="hide">隐藏</button>
    <button id="show">显示</button>
    <button id="tongshi">同时</button>
    <script>
        $("#hide").click(function(){
            $("div").hide();
        });
        $("#show").click(function(){
            $("div").show();
        });
        $("#tongshi").click(function(){
            $("div").toggle();
        });
    </script>
</body>

jQuery hide() 隐藏
jquery show() 显示
jQuery toggle() 隐藏和显示同时具备

淡入淡出

<body>
    <button id="ru">淡入</button>
    <button id="chu">淡出 </button>
    <button id="tongshi">淡入和淡出</button>
    <button id="change">变色</button>
    <div></div>
    <script>
        $("#ru").click(function(){
            $("div").fadeIn();
        });
        $("#chu").click(function(){
            $("div").fadeOut();
        });
        $("#tongshi").click(function(){
            $("div").fadeToggle();
        });
        $("#change").click(function(){
            $("div").fadeTo("slow",0.5);
        });
    </script>
</body>

fadeIn () 淡入
fadeOut () 淡出
fadeToggle() 淡入和淡出
fadeTo() 颜色渐变为给定的不透明度（值介于 0 与 1 之间）

滑动

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").slideDown()
            })
            $("button").eq(1).click(function(){
                $("div").slideUp();
            })
            $("button").eq(2).click(function(){
                $("div").slideToggle(500);
            })
        })
    </script>
</body>

slideDown（）下拉栏
slideUp（）上拉栏
slideToggle（）上下拉随便切换

动画

$(selector).animate({params},speed,callback);
params：形成动画的css属性

停止动画

stop（）停止动画

jQuery HTML

jQuery捕获

text（）—设置或返回所选元素的文本内容
html（）—设置或返回所选元素的内容（包括HTML标记）
val() —设置或返回表单字段的值

添加元素

append（）    在被选元素的结尾插入内容
prepend（）   在被选元素的开头插入内容
after（）     在被选元素之后插入内容
before（）    在被选元素之前插入内容

删除元素

remove（）       删除被选元素（及其子元素）
empty（）        从被元素中删除子元素

css的使用

指定css属性的值用css（“propertyname”);
设置指定css的属性css（“propertyname”，“value”）
设置多个元素的属性值css（“propertyname”：“value”，“propertyname”：“value”，…）

遍历

parent（）返回被选元素的直接父元素
parents（)返回被选元素的所有祖先元素
parentsUntil（）方法返回介于两个给定的元素之间所有的祖先元素
children（）返回被选元素的所有直接子元素
find（）返回被选元素的后代元素，一直到最后一个后代
siblings（）返回被选元素的所有兄弟元素
next（）返回下一个兄弟元素
nextAll（）返回被选元素后的所有兄弟元素

pre（），preAll（）preUntil（）与以上方法相似，方向想法。

喜乐ll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery知识点集

语法基础语法： $(selector).action()选取元素$("p:first") 选取第一个<p>元素$("ul li:first") 选取第一个ul元素的第一个<li>元素$("ul li:first-child") 选取每一个ul元素里面的第一个li元素$("[href]") 选取带有href属性的元素$("tr:even") 选取偶数位置的&l
复制链接

扫一扫