jQuery的属性,事件及操作-阿里云开发者社区

开发者社区> 任平生78> 正文

jQuery的属性,事件及操作

简介: 1.属性操作 1.1 基本属性操作 $("img").attr("src") 返回文档中所有图像的src属性值 $("img").attr("src","test.jpg") 设置文档中所有图像的src属性值 $("img").
+关注继续查看

1.属性操作

1.1 基本属性操作

$("img").attr("src")                返回文档中所有图像的src属性值
$("img").attr("src","test.jpg")     设置文档中所有图像的src属性值
$("img").removeAttr("src")          将文档中图像的src属性删除

$("input[type='checkbox']").prop("checked",true)        选中复选框
$("input[type='checkbox']").prop("checked",false)       取消复选框
$("img").removeProp("src")              删除img的src属性值

attrprop的区别:

attr可以找到自定义的属性,prop只能找到固有的属性

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<button class="select_all">全选</button>
<button class="reverse">反选</button>
<button class="cancel">取消</button>
<hr>
<table border="1">
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
</table>
<script>
    //为"select_all"类绑定点击事件
    $(".select_all").click(function(){
        $(":checkbox").prop("checked",true);//选中所有的"checkbox"标签
    });

    //为"cancel"类绑定点击事件
    $(".cancel").click(function(){
        $(":checkbox").prop("checked",false);//取消选中的"checkbox"标签
    });

    //为"reverse"类绑定点击事件
    $(".reverse").click(function(){
        //循环每一个"checkbox"标签
        $(":checkbox").each(function(){
            $(this).prop("checked",!$(this).prop("checked"));//把所有的"checkbox"标签的属性取反
        })
    });
</script>
</body>
</html>

1.2 class属性操作

$("p").addClass("test")             为p元素加上"text"类
$("p").removeClass("test")          从p元素中删除"test"类
$("p").toggleClass("test")          如果存在就删除,否则就添加"test"类
$("p").hasClass("test")             判断有没有"test",返回一个布尔值

1.3 标签文本text/HTML的属性

$("p").html()                   返回p标签的html内容
$("p").html("hello world")      设置p标签的html内容
$("p").text()                   返回p标签的text内容
$("p").text("test")             设置p标签的text内容
$("input").val()                获取文本框中的值
$("input").val("test")          设置文本框中的内容

2.CSS操作

2.1 样式

$("p").css("color")             访问查看p元素的color属性
$("p").css("color","red")       设置p元素的color属性的"red"
$("p").css({"color":"red","bakcground-color":"yellow"}) 设置p元素的color为"red",background属性为"yellow"(设置多个属性要用{}字典形式)

2.2 位置

$("p").offset()             元素在当前窗口的相对偏移,object{top:100,left:100}
$("p").offset().top         元素相对窗口顶部的偏移
$("p").offset().left        元素相对窗口左侧的偏移
$("p").position()           元素相对父元素的偏移,对可见元素有效,object{top:100,left:100}

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
    </style>
</head>
<body>
<div class="div1" style="width:200px;height:200px;background-color:darkblue"></div>
<script>
    var val_x=0;//初始化标签到浏览器左边框的距离
    var val_y=0;//初始化标签到浏览器上边框的距离

    //定义当鼠标悬浮在标签上面的时候,鼠标的样式为移动
    $(".div1").mouseover(function(){
        $(this).css("cursor","move")
    });

    //为盒子绑定鼠标左键按下事件
    $(".div1").mousedown(function(e){
        val_x=e.clientX;//定义标签的初始x坐标
        val_y=e.clientY;//定义标签的初始y坐标

        var $box_x=$(".div1").offset().left;//获取盒子相对窗口左侧的偏移
        var $box_y=$(".div1").offset().top;//获取盒子相对窗口顶侧的偏移

        //定义鼠标移动的操作
        $(document).mousemove(function(e){
            var move_x=e.clientX;//获取鼠标的偏移量
            var move_y=e.clientY;

            //移动窗口到指定的偏移量
            $(".div1").offset({left:$box_x+move_x-val_x,top:$box_y+move_y-val_y})
        });

        //绑定鼠标左键松开事件
        $(document).mouseup(function(){
            $(document).off();//关闭事件
        })
    });
</script>
</body>
</html>

这样可以使div盒子跟随鼠标的移动而移动

$(window).scrollTop()           获取窗口滚动条的高度
$(window).scrollLeft()          获取窗口滚动条的宽度
$(window).scrollTop("100")      获取窗口滚动条的高度为100

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<div class="box"></div>
<div id="returnTop">to top</div>
<script>
    //定义窗口的滚动条
    $(window).scroll(function(){
        console.log($(window).scrollTop());//打印滚动条的位置

        //当滚动条的位置大于200的时候
        if($(window).scrollTop()>200){
            $("#returnTop").show();//显示滚动条
        }
        else{
            $("#returnTop").hide();//隐藏滚动条
        }
        
        //为返回顶部按钮绑定点击事件 
        $("#returnTop").click(function(){
            $(window).scrollTop(0);//使窗口返回顶部
        })
    })
</script>
</body>
</html>

2.3 尺寸

$("p").height()                     获取p元素的高度
$("p").width()                      获取p元素的宽度

$("p:first").innerHeight()          获取p元素的第一个元素的内部区域的高度(不包括边框)
$("p:first").innerWidth()           获取p元素的第一个元素的内部区域宽度(不包括边框)

$("p:first").outerHeight()          获取p元素的第一个元素的外部区域的高度(默认包括边框)
$("p:first").outerWidth()           获取p元素的第一个元素的外部区域的宽度(默认包括边框)
$("p:first").outerHeight(true)      为true时包括边框

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0814/jquery-3.2.1.js"></script>
    <style>
        .box{
            width:200px;
            height:100px;
            padding:50px;
            border:10px solid red;
            background-color:pink;
            margin:20px;
        }
    </style>
</head>
<body>
<div class="box">DIV</div>
<script>
    console.log($(".box").height());//获取盒子的高度
    console.log($(".box").width());//获取盒子的宽度

    console.log($(".box").innerHeight());//获取盒子的内部区域的高度(包括填充)
    console.log($(".box").innerWidth());//获取盒子的内部区域的宽度(包括填充)

    console.log($(".box").outerHeight());//获取盒子的外部区域的高度(包括边框)
    console.log($(".box").outerWidth());//获取盒子的外部区域的宽度(包括边框)

    console.log($(".box").outerHeight(true));//获取盒子的外部区域的高度(示包括边距)
    console.log($(".box").outerWidth(true));//获取盒子的外部区域的宽度(不包括边距)
</script>
</body>
</html>

显示如下:

img_470d5c42288028210ae8db17fd15b568.png

打印结果如下:

img_a73f2cbaa538753edc741a285009f780.png

3. 文档处理

3.1 内部插入

$("p").append("<p>p1</p>")          在p标签后面追加标签"<p>p1</p>"
$("p").appendTo("<p>p1</p>")              把p标签追加到标签"<p>p1</p>"后面
$("p").prepend("<p>p1</p>")         在p标签前面追加标签"<p>p1</p>"
$("p").prependTo("<p>p1</p>")             把p标签追加到标签"<p>p1</p>"前面

3.2 外部插入

$("p").after("<p>p1</p>")           在p标签的同级标签后面插入标签"<p>p1</p>"
$("p").before("<p>p1</p>")          在p标签的同级标签前面插入标签"<p>p1</p>"
$("p").insertAfter("<p>p1</p>")     把p标签插入到标签"<p>p1</p>"后面
$("p").insertBefore("<p>p1</p>")    把p标签插入到标签"<p>p1</p>"前面

3.3 替换

$("p").replaceWith("<img src='a.jpg'>") 把p标签替换成图片
$(".div1").replaceAll("p")              把div类替换成文档中所有的p标签

例子一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script>
    $(".div1").replaceWith("<p>p1</p>");//把p标签替换成p标签
</script>
</body>
</html>

显示如下:

img_960ef2e7829fa0def851fa1278d62be6.png

例子二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<div class="div1">div5</div>
<div class="div1">div6</div>
<div class="div1">div7</div>
<script>
    $(".div1").replaceAll("p");//把div类替换成文档中所有的p标签
</script>
</body>
</html>

显示如下:

img_8a9055c9ff704fa129ccc4df7ff95b9d.png

3.4 删除

$("p").empty()              删除所有的p标签中的所有的子标签
$("p").remove([expr])       删除所有的p标签以及p标签中的子标签  

3.5 复制

$("p").clone()          克隆p标签
$("p").clone(true)      布尔值指定事件处理函数是否会被复制

3.6 循环

使用jQuery实现的集合循环

方式一:

$.each(Array,function(){
    function_suite
})

方式二:

$(element).each(function(){
    function_suite
})

例子:使用each循环进行判断

代码一:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<script>
    li=[11,22,33,44,55,66,77];
    $.each(li,function(i,v){
       if(v==33){
           return;
       }
       console.log(v);
    });
</script>
</body>
</html>

打印如下:

img_0922fd70035e33786dd6cac4ae34848a.png

代码二:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<script>
    li=[11,22,33,44,55,66,77];
    //定义循环,i为列表的索引,v为列表索引对应的值
    $.each(li,function(i,v){
        //当循环中的值为33时
        if (v==33){
            return false;
        }
        console.log(v);
    });
</script>
</body>
</html>

打印如下:

img_b48b22bcba7d83241db824d3cddbfeab.png

结论:

each的参数function内如果出现return,结束当次循环,类似于continue
each的参数function内如果出现return false,结束的是整个each循环,类似break

4. 事件

4.1 事件

$("p").click()                      单击事件
$("p").dbclick()                    双击事件

$("p").mouseover()                  当鼠标指针位于元素上方时触发事件
$("p").mousemove()                  当鼠标指针在指定的元素中移动时触发事件
$("p").mouseout()                   当鼠标指针从元素上移开时触发事件

$("input[type='text']").focus()     元素获得焦点时,触发focus事件
$("input[type='text']").blur()      元素失去焦点时,触发blur事件
$("input[type='text']").change()    当元素的值发生改变时触发事件

$("button").mousedown()             当按下鼠标时触发事件
$("button").mouseup()               元素上放开鼠标按键时触发事件

$(window).keydown()                 当键盘或按钮被按下时触发事件
$(window).keypress()                当键盘或按钮被按下时触发事件,每输入一个字符都触发一次事件

$(window).scroll()                  当用户滚动窗口的滚动条时触发事件
$(window).resize()                  当调整浏览器窗口的大小时触发事件
$(window).unload()                  用户离开页面时,触发事件

$("input").keyup()                  当按钮被松开时触发事件
$("input").select()                 当input元素中的文本被选择时触发事件
$("form").submit()                  当提交表单时触发事件

4.2 绑定方式

$(标签).事件(函数内容)

4.3 事件委托

通过其上级(可以是多层上级)事件委托,当点击这个标签时才会绑定事件

在页面不刷新的情况下添加一行数据,行数据有操作按钮,点击并无效果,就可以通过事件委托来解决

委托方式:

$("ul").on("click","li",function(){
    function_suite
})

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.js"></script>
</head>
<body>
<div id="box">
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
    <div class="item">666</div>
</div>
<button>ADD</button>
<script>
    //为"button"按钮添加点击事件
    $("button").click(function(){
        $("#box").append("<div class='item'>777</div>");//在div标签后面添加一行
    });

    //为"box"下的"item"类添加点击事件
    $("#box").on("click",".item",function(){
        console.log($(".item").text());//打印"item"类的文本
    })
</script>
</body>
</html>

4.4 event object

所有的事件函数都可以传入event参数方便处理事件

方式:

$("p").click(function(event){
    function_suite
})

(event_object)的属性方法

event.pageX                     事件发生时,鼠标距离网页左上角的水平距离
event.pageY                     事件发生时,鼠标距离网页左上角的垂直距离
event.type                      事件的类型
event.which                     按下了哪一个键
event.data                      在事件对象在绑定数据,然后传入事件处理函数
event.target                    事件针对的网页元素
event.preventDefault()          阻止事件的默认行为(比如点击链接,会自动打开新页面)
event.stopPropagation()         停止事件向上层元素冒泡

4.5 动画效果

基点

$("p").show()                   显示隐藏的匹配元素
$("p");show("slow")             参数表示速度,("slow","normal","fast"),也可以设置为毫秒
$("p").hide()                   隐藏显示的元素
$("p").toggle()                 切换显示/隐藏

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0814/jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg">;//定义一张图片
<hr>
<button class="hide_element">hide</button>;//定义隐藏按钮
<button class="show_element">show</button>;//定义显示按钮
<button class="toggle_element">toggle</button>;//定义切换按钮
<script>
    //定义隐藏的点击事件
    $(".hide_element").click(function(){
        $("img").hide()
    });

    //定义显示的点击事件
    $(".show_element").click(function(){
        $("img").show()
    });

    //定义切换按钮的点击事件
    $(".toggle_element").click(function(){
        $("img").toggle()
    });
</script>
</body>
</html>

用浏览器打开的效果如下:

img_92e8e166f949ff0a053a9d19243931bf.png

可以看到,图片是显示的,点击"hide"按钮,图片就被隐藏起来,然后再点击"show"按钮,图片就又会被显示出来了.

另外,当图片显示的时候,点击"toggle"按钮,图片就会隐藏,而当图片是隐藏的时候,点击"toggle"按钮,图片又会显示出来.

4.6 滑动操作

$("p").slideDown("1000")        用1000毫秒的时间将段落滑下
$("p").slideUp("1000")          用1000毫秒的时间将段落滑上
$("p").slideToggle("1000")      用1000毫秒的时间将段落滑上,滑下

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../0814/jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg" style="width:500px;height:300px">
<hr>
<button class="slide_up">slide_up</button>
<button class="slide_down">slide_down</button>
<button class="toggle">toggle</button>

<script>
    //对"slide_up"类绑定点击事件
    $(".slide_up").click(function(){
        $("img").slideUp(1000);//用1000毫秒的时间将段落收起
    });

    //对"slide_down"类绑定点击事件
    $(".slide_down").click(function(){
        $("img").slideDown(1000);//用1000毫秒的时间将段落滑下
    });

    //对"toggle"类绑定点击事件
    $(".toggle").click(function(){
        $("img").slideToggle(1000);//用1000毫秒的时间将段落滑下或者收起
    });
</script>
</body>
</html>

4.7 淡入淡出

$("p").fadeIn("1000")           用1000毫秒时间将段落淡入
$("p").fadeOut("1000")          用1000毫秒时间将段落淡出
$("p").fadeToggle("1000")       用1000毫秒时间将段落淡入,淡出
$("p").fadeTo("slow",0.6)       用慢速度将段落的透明度调整到0.6

例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-3.2.1.js"></script>
</head>
<body>
<img src="a.jpg" style="width:500px;height:300px">
<hr>
<button class="fade_in">fadeIn</button>
<button class="fade_out">fadeOut</button>
<button class="fade_toggle">fadeToggle</button>
<button class="fade_to">fadeTo</button>
<script>
    //对"fade_in"类绑定点击事件
    $(".fade_in").click(function(){
        $("img").fadeIn(1000);//用1000毫秒时间将段落淡入
    });

    //对"fade_out"类绑定点击事件
    $(".fade_out").click(function(){
        $("img").fadeOut(1000);//用1000毫秒时间将段落淡出
    });

    //对"fade_toggle"类绑定点击事件
    $(".fade_toggle").click(function(){
        $("img").fadeToggle(1000);//用1000毫秒时间将段落淡入或淡出
    });
    
    //对"fade_to"类绑定点击事件
    $(".fade_to").click(function(){
        $("img").fadeTo("slow",0.6);//用慢速度将图片的透明度调整到0.6
    });
</script>
</body>
</html>

4.8 页面载入

页面载入,也就是当页面载入成功后立即运行的函数事件

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

也可以简写为:

$(function(){
    function_suite
})

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C#通过“委托和事件”的方式实现进程监控并与“普通方式”对比
今天重新学习了一下观察者模式,对我的思路产生了启发。进程监控程序之前写过几个,这回换一种思路,改用委托和事件来实现。我已经用序号将关键的几步标注,方便大家理顺思路。代码如下: using System; using System.
685 0
JQuery属性控制
JQuery元素属性控制有方法attr()、prop()、removeAttr()、removeProp(); attr()可以控制元素的特定属性和自定义属性 ...
565 0
全面入门jQuery最佳实践(二)-jQuery的属性与样式
1 .attr()与.removeAttr() 每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。如:在img元素中,src就是元素的特性,用来标记图片的地址。
979 0
image的srcset属性
介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。
752 0
HighCharts画时间趋势图,标示区以及点击事件操作
最近在用HighCharts画趋势图,如果按照设计文档上来画那太复杂了,于是根据自己多年的经验改动了设计文档,添加了highcharts的标示区,然而我也发现,最后一次画highchart趋势图还是在2年前,现在居然都不知道怎么画了(其实也不是不会画,只不过给的开发时间紧,而且我又是个急子,所以觉得...
681 0
【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81055973 ...
872 0
jQuery EasyUI API 中文文档 - 属性表格(PropertyGrid)
PropertyGrid 属性表格 扩展自 $.fn.datagrid.defaults,用 $.fn.propertygrid.defaults 重写了 defaults。 依赖 datagrid 用法 1. 1. $('#pg').propertygrid({   2.     url:'propertygrid_data.json',   3.     showGroup:true 4. });  特性 其特性扩展自 datagrid,下列是为 propertygrid 增加的特性。
862 0
Gradle的属性设置大全
Gradle作为一款项目构建工具,由于其强大、灵活、快速、完全兼容Ant等特性,越来越受到人们欢迎。Gradle的灵活有时候也会引起人们的困惑。比如在Gradle中设置变量和属性就有N种办法。由于Gradle的理念是Convention over configruation(约定优于配置),所以如果了解了这些约定,那么在使用Gradle的属性配置时一定会如鱼得水。
959 0
+关注
152
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载