0

0

js常用属性实例分享

小云云

小云云

发布时间:2018-02-28 11:33:06

|

1659人浏览过

|

来源于php中文网

原创

本文主要和大家分享js常用属性实例,首先是几个比较容易常见的属性,希望能帮助到大家。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26


$("p").dblclick(function() {

        $(this).css("color""green");

})

//当鼠标指针穿过元素

$("p").mouseenter(function() {

    $(this).text("鼠标指针穿过元素");

})

//鼠标指针离开元素

$("p").mouseleave(function() {

      $(this).text("鼠标指针离开元素");
})

//鼠标指针移动到元素上,并按下鼠标按键

$("p").mousedown(function() {

    $(this).text("鼠标指针移动到元素上方,并按下鼠标按键");

})

//在元素上松开鼠标按钮时

$("p").mouseup(function() {

    $(this).text("在元素上松开鼠标按钮时");

})

//元素获得焦点

$(":text").focus(function() {

    $(this).val("元素获得焦点");

})

//元素失去焦点

$(":text").blur(function() {

    $(this).val("元素失去焦点");

})

  插入方法:




1

2

3

4

5

6

7

8

9

10

11

12


var i = $("#ul1 li").length;

//append末尾插入

$("#btn1").click(function() {

  i++;

  $("#ul1").append("

  • add"
  •  + i + "")

    })

    //prepend头部插入

    var j = 1;

    $("#btn2").click(function() {

      j--;

      $("#ul1").prepend("

  • add"
  •  + j + "")

    })
    before()
    //元素之前
    after()//元素之后

      移除方法




    1

    2

    3


    $("#btn4").click(function() {

         $("#ul1 li:first").remove()

    })

    remove() - 删除被选元素(及其子元素)

    empty() - 从被选元素中删除子元素 清空

    父级属性




    1

    2

    3


    parent() 被选元素的直接父元素

    parents() 被选元素的所有祖先元素,它一路向上直到文档的根元素 ()

    parentsUntil()介于两个给定元素之间的所有祖先元素

    后代属性




    1

    2

    3


    children() 方法返回被选元素的所有直接子元素 只一级  

     

    find() 方法返回被选元素的指定后代元素,一路向下直到最后一个后代
     $(
    "p").find("span");//

    后代的所有 元素
     $("p").find("*");// 

    的所有后代

    名扬银河企业建站源码2.0.2
    名扬银河企业建站源码2.0.2

    名扬银河企业建站系统,适用于无代码基础的新手,快速搭建企业网站,程序内置了多项实用功能及插件,能够便捷的对网站进行修改、调整、优化等方面进行操作。【部分功能介绍】1、产品管理发布企业产品信息,管理企业产品,自定义产品封面图,产品详情图、文、视频,产品扩展属性自定义等。2、案例管理系统发布企业成功案例,管理成功案例,自定义案例封面图,案例详情图、文、视频,案例扩展属性自定义等。3、资讯管理系统发布企

    下载

    同胞属性




    1

    2

    3

    4

    5

    6

    7

    8

    9

    10


    siblings() //被选元素的所有同胞元素

        $("h2").siblings().css({"color":"red","border":"2px solid red"});

        $("h2").siblings("p").css({"color":"red","border":"2px solid red"});

    next()//被选元素的下一个同胞元素

        $("h2").next().css({"color":"red","border":"2px solid red"});

    nextAll()//被选元素的所有跟随的同胞元素

        $("h2").nextAll();

    nextUntil()//介于两个给定参数之间的所有跟随的同胞元素

         $("h2").nextUntil("h6");

    prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在 DOM 树中沿着同胞元素向后遍历,而不是向前)。

    遍历过滤




    1

    2

    3

    4

    5

    6

    7

    8

    9

    10


    first() 方法返回被选元素的首个元素

        $("p p").first();

     last() 方法返回被选元素的最后一个元素。

         $("p p").last();

    eq() 方法返回被选元素中带有指定索引号的元素。从0开始

        $("p").eq(1);

    filter() 方法规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

        $("p").filter(".intro");

    not() 方法返回不匹配标准的所有元素。not() 方法与 filter() 相反。

        $("p").not(".intro");

    相关推荐:

    HTML中划分框窗有哪些常用属性

    关于CSS常用属性的详细介绍

    css3中的常用属性介绍

    相关专题

    更多
    css
    css

    css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

    524

    2023.06.15

    css居中
    css居中

    css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

    263

    2023.07.27

    css如何插入图片
    css如何插入图片

    cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

    754

    2023.07.28

    css超出显示...
    css超出显示...

    在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

    539

    2023.08.01

    css字体颜色
    css字体颜色

    CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

    760

    2023.08.10

    什么是css
    什么是css

    CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

    605

    2023.08.10

    css三角形怎么写
    css三角形怎么写

    CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

    560

    2023.08.21

    css设置文字颜色
    css设置文字颜色

    CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

    395

    2023.08.22

    高德地图升级方法汇总
    高德地图升级方法汇总

    本专题整合了高德地图升级相关教程,阅读专题下面的文章了解更多详细内容。

    43

    2026.01.16

    热门下载

    更多
    网站特效
    /
    网站源码
    /
    网站素材
    /
    前端模板

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    React 教程
    React 教程

    共58课时 | 3.7万人学习

    TypeScript 教程
    TypeScript 教程

    共19课时 | 2.3万人学习

    Bootstrap 5教程
    Bootstrap 5教程

    共46课时 | 2.9万人学习

    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送

    Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号