点击联系客服
客服QQ: 客服微信:

中山老站长

 找回密码
 立即注册
查看: 972|回复: 50

web前端开发工程师知识系统_32_JavaScript jQuery (2)

[复制链接]

1

主题

1

帖子

-7

积分

限制会员

积分
-7
发表于 2021-10-1 07:27:42 | 显示全部楼层 |阅读模式
一、修改

与DOM一样,您可以修改元素的内容、属性和样式,但所有与修改相关的函数都用作一个函数。

1.修改内容

(1)元素开始标签和结束标签之间的原始HTML内容

//DOM

元素。innerHTML

//jQuery

$元素。html(“新建内容”)

如果没有“//new  content”,则导入元素的内容,有时将原始内容修改为新内容(同时使用函数)。

(2)元素的开始标记和结束标记之间的纯文本内容

//DOM

元素。textContent

//jQuery

$元素。text(“新内容”)

(3)表单元素的值

//DOM

元素。value

//jQuery

$元素。val(“新值”)

示例:使用元素内容执行表单验证。

菩提

H1工作要素内容和值/h1

Form  action=' '

用户名:input  name='uname  '

Span/spanbr

密码:输入类型='密码'名称=' upwd  '

Span/spanbr

Input  type='submit' value='提交属性'

/form

scriptsrc=' js/jquery-1 . 11 . 3 . js  '/脚本

脚本(脚本)

//如果正确,请使用图3360'img  src='img/ok.png  ' '

//名称错误时, 'img  src='img/err.png  '用户名必须在3到9位之间!'

//如果密码不正确,则3360 'img  src='img/err.png  '密码必须在6到8位之间!'

//DOM步骤4

//确认用户名

//1。查找触发事件的元素

//触发事件的元素是在失去焦点时执行验证的文本框

$(“:文本”)

//2。绑定事件处理程序

.blur(function  () {

var  $ this=$(this);

//3。找到要修改的元素

//查找当前文本框旁边的span元素

var  $ span=$ this  . next();

//4。修改元素

//4.1获取当前文本框的内容

var  value=$ this  . val();

//4.2验证

IF(value  . length=3 value  . length=9){

//4.3修改span的内容

$ span  . html(` img  src=' img/ok  . png  ' `);

} else  {

$ span  . html(` imgsrc=' img/err  . png  '用户名必须在3到9位之间!`);

}

})。

//确认密码

//1。查找触发事件的元素

//触发事件的是密码框

$(“: password”)

//
2.绑定事件处理函数
                        .blur(function () {
                                var $this = $(this);
                                // 3.查找需要修改的元素
                                // 当前密码框跟前的span元素
                                var $span = $this.next();
                                // 4.修改元素
                                // 4.1先获取密码框的内容
                                var value = $this.val();
                                // 4.2进行验证
                                if (value.length >= 6 && value.length

2.修改属性

(1)字符串类型的HTML标准属性

//DOM/
//旧核心DOM/
元素.getAttribute("属性名")
元素.setAttribute("属性名","新值")
//新HTML DOM
元素.属性名=新值
//jQuery
$元素.attr("属性名","新值")
$元素.prop("属性名","新值")

举例:点击图片切换下一张;


        操作元素的属性
       
[img][/img]
       
       

(2)bool类型的HTML标准属性

//DOM
//HTML DOM
元素.属性名
//jQuery
$元素.prop("属性名",新bool值)

(3)自定义扩展属性

//DOM
//旧核心DOM:
元素.getAttribute()
元素.setAttribute()
//HTML5:
元素.dataset.属性名
//jQuery
$元素.attr()

举例:点小图片,切换大图片;


  
[img][/img]
  
[img][/img]
  
[img][/img]
  
[img][/img]
  
  
[img][/img]
  
  

3.修改样式

//DOM
//修改内联样式
元素.style.css属性="新值"
//获取完整样式
getComputedStyle(元素)
//jQuery
//获取css属性值、修改css属性值
$元素.css("css属性","新值")
//如果.css()中没有给新值,则.css()底层自动执行getComputedStyle()操作,获取属性值
//如果.css()中给了新值,则.css()底层自动执行.style.css属性,执行修改操作

批量修改一个元素的多个css属性:

//DOM
元素.className="class名"  //只能整体替换所有class,不便于修改其中某一个class
//jQuery  
$元素.addClass("className")  //添加一个class
$元素.removeClass("className")  //去除一个class
$元素.hasClass("className")  //判断是否有某个calss
$元素.toggleClass("className")  //在有或没有一个class之间来回切换

举例:实现双态按钮;

  
  
  
    .btn {
      padding: 5px 10px;
      border-radius: 3px;
      border: 1px solid #aaa;
      outline: none;
    }
    .up {
      background: #fff;
      color: #333;
    }
    .down {
      background: #ddd;
      color: #fff;
    }
  

  双态按钮
  
  

二、按节点间关系查找

1.DOM 两种关系,六个属性

(1)父子关系

元素.parentElement  //父元素
元素.children  //所有直接子元素
元素.firstElementChild  //第一个直接子元素
元素.lastElementChild  //最后一个直接子元素

(2)兄弟关系

元素.previousElementSibling  //前一个兄弟元素
元素.nextElementSibling   //后一个兄弟元素

2.jQuery两种关系,八个属性

(1)父子关系

$元素.parent()   //父元素
$元素.children()   //所有直接子元素
$元素.children("选择器")  //只选择符合要求的个别直接子元素
$元素.find("选择器")  //选择所有后代中符合要求的元素
$元素.children(":first-child")  //第一个直接子元素
$元素.children(":last-child")  //最后一个直接子元素

(2)兄弟关系

$元素.prev()  //前一个兄弟
$元素.prevAll("选择器")  //之前所有兄弟:
$元素.next()  //后一个兄弟
$元素.nextAll("选择器")  //之后所有兄弟
$元素.siblings("选择器")  //除当前元素之外,其余所有兄弟元素

案例:标签页效果;

  
  
    .tabs {
      list-style: none;
      padding: 0
    }
    .tabs a {
      text-decoration: none;
      color: #000;
      padding: 6px 12px;
      display: inline-block;
    }
    .tabs>li {
      float: left;
      border-bottom: 1px solid #000;
    }
    .tabs>.active {
      border: 1px solid #000;
      border-bottom: 0;
    }
  

  使用属性选择器实现标签页头的切换
  
   
      [url=]十元套餐[/url]
   
   

  •       [url=]二十元套餐[/url]
       
       

  •       [url=]三十元套餐[/url]
       
      

      
      

    效果如图,每点击一个套餐,就会切换到当前套餐下。

  • 回复

    使用道具 举报

    1

    主题

    610

    帖子

    -316

    积分

    限制会员

    积分
    -316
    发表于 2021-10-1 07:28:17 | 显示全部楼层
    不错不错,楼主您辛苦了。。。
    回复

    使用道具 举报

    0

    主题

    592

    帖子

    -410

    积分

    限制会员

    积分
    -410
    发表于 2021-10-1 07:48:47 | 显示全部楼层
    帮帮顶顶!!
    回复

    使用道具 举报

    0

    主题

    625

    帖子

    -428

    积分

    限制会员

    积分
    -428
    发表于 2021-10-1 08:08:53 | 显示全部楼层
    过来看看的
    回复

    使用道具 举报

    1

    主题

    561

    帖子

    -324

    积分

    限制会员

    积分
    -324
    发表于 2021-10-1 08:29:13 | 显示全部楼层
    帮帮顶顶!!
    回复

    使用道具 举报

    1

    主题

    583

    帖子

    -331

    积分

    限制会员

    积分
    -331
    发表于 2021-10-1 08:49:29 | 显示全部楼层
    不错不错,很好哦
    回复

    使用道具 举报

    1

    主题

    622

    帖子

    -376

    积分

    限制会员

    积分
    -376
    发表于 2021-10-1 09:10:35 | 显示全部楼层
    我是个凑数的。。。
    回复

    使用道具 举报

    0

    主题

    620

    帖子

    -378

    积分

    限制会员

    积分
    -378
    发表于 2021-10-1 09:31:39 | 显示全部楼层
    前排支持下分享
    回复

    使用道具 举报

    1

    主题

    617

    帖子

    -329

    积分

    限制会员

    积分
    -329
    发表于 2021-10-1 09:52:58 | 显示全部楼层
    不错不错,很好哦
    回复

    使用道具 举报

    0

    主题

    621

    帖子

    -355

    积分

    限制会员

    积分
    -355
    发表于 2021-10-1 10:13:11 | 显示全部楼层
    我抢、我抢、我抢沙发~
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|无图版|手机版|小黑屋|中山@IT精英团

    GMT+8, 2022-7-2 10:57 , Processed in 0.169629 second(s), 25 queries .

    Powered by Discuz! X3.4

    © 2020 Comsenz Inc.

    快速回复 返回顶部 返回列表