jquery属性操作，dom节点操作

最新推荐文章于 2023-02-23 19:17:46 发布

Relaxaaa

最新推荐文章于 2023-02-23 19:17:46 发布

阅读量224

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/Relaxaaa/article/details/113780139

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jquery属性操作

在js中对于属性的操作会直接使用属性名进行赋值与获取，但是jquery对齐进行了封装，提供了对不同属性操作的方法

属性操作函数	说明
html ( )	设置或获取innerHTML属性的值
text ( )	设置或获取innerText属性的值
val ( )	设置或获取value属性的值
attr ( )	设置或获取某属性的值
removeAttr ( )	删除某属性
prop ( )	跟attr()作用一样，但是主要针对可简写的属性
removeProp ( )	删除某属性
addClass ( )	设置元素class属性的值
removeClass ( )	删除元素class属性的值

attr与prop函数

attr函数	说明
attr ( “属性名” )	按属性名获取某属性的值
attr ( “属性名” , 属性值)	按属性名设置某属性的值

attr与prop简单的区别于使用

都可以对指定属性进行获取与赋值，但是attr进行设置时是将指定标签属性书写在页面中实现效果，prop是直接操作对象属性进行效果展示而不会书写在页面中，对于属性的获取与修改使用prop更加方便，但如果想删除页面标签已存在的属性时使用removeAttr

jquery样式操作

与js一样，jquery也可以进行样式的修改，虽然不建议在js代码中直接进行样式的修改，但是jquery仍然提供了相较于js对样式修改的方法的封装

分类	样式函数	说明
CSS样式	css ( )	获取或设置样式属性的通用函数
位置	offset ( )	获取或设置元素相对于文档的位置
	scrollTop ( )	获取或设置元素相对于滚动条顶部的位置
	scrollLeft ( )	获取或设置元素相对于滚动条左端的位置
尺寸大小	height ( )	获取或设置元素的高度
	width ( )	获取或设置元素的宽度

css()函数

jquery对于样式操作的通用函数

css函数	说明
css( “属性名” )	按属性名获取某属性样式的值
css( “属性名” , 属性值)	按属性名设置某属性样式的值

            $("div").hover(function(){
               $(this).css({"backgroundColor":"red","width":"500px"})
            //   $(this).css("width","500px")
            //    $(this).width("500px");
            //    $(this).height("500px");
            },function(){
                $(this).css("backgroundColor","aqua")
            //     $(this).width("100px");
            //    $(this).height("100px");
            })

工具函数

分类	工具函数	说明
遍历操作	$.each ( )	遍历数组或对象，前面已经讲过
测试操作	$.type( )	测试数据的类型
	$.isNumeric( )	测试对象是否是数字
字符串操作	$.trim( )	去掉字符串两端的空格
	$.parseJSON( )	将字符串解析成JSON对象

$.each ( )

        //使用jquery进行遍历
        //语法
        // $.each(遍历的数组,function(索引,数据){})
        $.each(jsonObj,function(i,e){
            alert(i+e);
        })

$.type( )

          var a = 1;
            var b = "1";
            //js中用于判断变量类型使用typeof 变量
            //alert(typeof a)
            //jquery使用$.type(a)
            alert($.type(a))

$.isNumeric( )

            //js对于数字的判断是否为非数字使用isNaN(变量)
            //true-不是数字  false-是数字
            //alert(isNaN(a))
            
            //jquery判断变量是否为数字使用$.isNumeric(变量)
            alert($.isNumeric(a))

$.trim()

            var str=" a "
            //jquery去除字符串前后空格
            alert($.trim(str))

$.parseJSON( )

            //json对象是以特殊方式书写的字符串
            //在js中如果按照指定格式书写会被自动识别为json对象
            //但在网络传输过程中传输的是字符串
            var jsonStr = '{"name":"张三","age":20}';
            //对于json字符串需要先转换为json对象之后才能使用

            //js将json字符串转换为json对象
            var j1 = JSON.parse(jsonStr);
            //alert(j1.name)

            //jquery将json字符串转换为json对象
            var j2=$.parseJSON(jsonStr);
            alert(j2.name);

            //推荐使用js进行json对象的转换

jquery节点操作

使用jquery提供的方法进行快速的节点的获取修改与添加

函数	说明
append( )	A.append ( B )，把B添加到A元素内的尾部
prepend( )	A.prepend( B )，把B添加到A元素内的头部
before( )	A.before( B )，把B添加到A的前面
after( )	A.after( B )，把B添加到A的后面

函数	说明
remove( )	remove( )，把A从页面中删除掉
empty( )	A.empty( )，把A中的所有子元素删除掉

函数名称	说明
old.replaceWith(“new”)	现有的元素用别的元素替换

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="../js/jquery-3.4.1.min.js"></script>
    <style>
        input {
            width: 70px;
        }
    </style>
    <script>
        $(function () {

            $("button").click(function () {
                var t1 = "<td>" + $("input:eq(0)").val() + "</td>";
                var t2 = "<td>" + $("input:eq(1)").val() + "</td>";
                var t3 = "<td>" + $("input:eq(2)").val() + "</td>";
                var index = parseInt($("input:eq(3)").val());
                var r = "<tr>" + t1 + t2 + t3 + "</tr>"
                if ($(this).text() == "添加") {
                    $("#tbody1").append(r);
                } else if ($(this).text() == "清除") {
                    $("#tbody1").empty();
                } else if ($(this).text() == "删除") {
                    $("tr:eq(" + (index - 1) + ")").remove();
                } else if ($(this).text() == "替换") {
                    $("tr:eq(" + (index - 1) + ")").replaceWith(r);
                }
            })
        })
    </script>
</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <button>添加</button> <button>清除</button> <br>
    <input type="text">
    <button>删除</button> <button>替换</button>
    <table border="1px">
        <tbody id="tbody1">
        </tbody>
    </table>
</body>
</html>

函数名称	说明
wrap( )	A.wrap( B )，用B包裹每一个A
wrapAll( )	A.wrapAll( B )，把所有的A作为整体用B包裹
wrapInner( )	A.wrapInner( B )，用B把A中的子元素整个包裹

函数名称	说明
clone()	用来复制一个节点

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").click(
                function () {

                    $("#s2").append($("#s1 option:selected").clone());
                    $("#s1 option:selected").remove();

                }
            )
        })
    </script>
</head>

<body>
    <select id="s1" size="4">
        <option value="java" selected="selected">Java</option>
        <option value="c#">C#</option>
        <option value="php">PHP</option>
        <option value="c++">C++</option>
    </select>
    <input type="button" id="btn" value="&gt;&gt;" />
    <select id="s2" size="4">
    </select>
</body>
</html>
</html>

名称	说明
eq(num )	获得指定下标的元素
first( )	获得匹配到的第一个元素
last( )	获得匹配到的最后一个元素
slice( num1,num2)	获取指定下标范围内的元素

节点查找函数	说明
children( )	根据条件获取元素的子元素 a.children(b) a的直接子元素b
parent( )	获取元素的父元素
prev( )	获取紧挨着的前一个平级元素
next( )	获取紧挨着的后一个平级元素
find()	根据条件找出元素的后代元素
siblings( )	找出与元素平级的所有其他元素

jquery效果

使用jquery的方法进行相应效果的书写，并且可以进行动画的自定义

显示隐藏

$(selector).hide(speed,callback);
//隐藏将指定标签元素以指定的speed时间隐藏，隐藏后执行callback方法
$(selector).show(speed,callback);
//显示将指定标签元素以指定的speed时间显示，显示后执行callback方法
$(selector).toggle(speed,callback);
//将指定标签进行显示和隐藏

淡入淡出

$(selector).fadeIn(speed,callback);
//将指定隐藏的元素以指定speed时间淡入至页面，结束后执行callback方法
$(selector).fadeOut(speed,callback);
//将指定显示的元素以指定speed时间淡出至页面，结束后执行callback方法
$(selector).fadeToggle(speed,callback);
//将指定元素标签淡入淡出
$(selector).fadeTo(speed,opacity,callback);
//将指定元素标签使用指定时间speed设置为指定透明度opacity

滑动

$(selector).slideDown(speed,callback);
//将指定元素展开
$(selector).slideUp(speed,callback);
//将指定元素收起
$(selector).slideToggle(speed,callback);
//将指定元素展开收起

jquery动画

是css样式为基础仅动画书写的方法，通过设置动画执行后的样式，之后交由动画方法进行执行，实现动画效果

$(selector).animate({params},speed,callback);
//{params}以json形式书写的指定标签进行动画效果之后的css样式
$(selector).stop()
//停止正在执行的动画
$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 


//支持使用相对原值进行额外操作
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

//每个方法独立运行，多个方法不会同时执行会依次执行
//在进行效果设置时如果需要在前一个效果后下一个生效那么需要定义多个方法

Relaxaaa

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery属性操作，dom节点操作

jquery属性操作在js中对于属性的操作会直接使用属性名进行赋值与获取，但是jquery对齐进行了封装，提供了对不同属性操作的方法属性操作函数说明html ( )设置或获取innerHTML属性的值text ( )设置或获取innerText属性的值val ( )设置或获取value属性的值attr ( )设置或获取某属性的值removeAttr ( )删除某属性prop ( )跟attr()作用一样，但是主要针对可简写的属性remo
复制链接

扫一扫