jQuery知识点(二)

💻博主现有专栏:

                C51单片机(STC89C516),c语言,c++,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux,基于HTML5的网页设计及应用,Rust(官方文档重点总结),jQuery,前端vue.js,Javaweb开发,设计模式、Python机器学习等
🥏主页链接:

                Y小夜-CSDN博客

目录

🎯jQuery操作样式

🎃css()方法

🎃类样式方法

🎯jQueary操作内容

🎯jQuery操作尺寸

🎯jQuery操作属性

🎯jQuery操作节点


🎯jQuery操作样式

🎃css()方法

专门用来读取或设置css样式的,使用形式:

$(“div”).css(“color”)      //读取div元素的color属性值
$(“div”).css(“color”, “red”);    //设置div元素的color属性值
$(“div”).css(“color”, “red”).css(“width”, “300”).css(“height”, “200”).css(“background-color”, “pink”);   //链式写法
$(“div”).css({color: “red”, width: 300, height: 200, “background-color”: “pink”});    //效果和上面链式写法一样

键值对形式建议分行写,结构更清晰

$(“div”).css({
color: “red”, 
width: 300, 
height: 200,
“background-color”: “pink”
}); 

🎃类样式方法

专门用来操作元素的class属性

addClass(): 追加样式
removeClass(): 移除样式
hasClass(): 判断样式
toggleClass(): 切换样式   

🎯jQueary操作内容

  • addClass(): 追加样式
  • removeClass(): 移除样式
  • hasClass(): 判断样式
  • toggleClass(): 切换样式   

text()和html()方法用于是双标记的网页元素;

val()方法用于具有value属性的表单元素;

上面三个方法不给参数是用来获取值的,给参数是设置值

🎯jQuery操作尺寸

  • width()、height():  获取的是 content 区域大小
  • innerWidth()、innerHeight():获取的是 content + padding 区域大小
  • outerWidth()、outerHeight():获取的是 content + padding + border 区域大小
  • outerWidth(true)、outerHeight(true):获取的是 content + padding + border + margin 区域大小

注意:操作尺寸的这几个方法一般用在读取值时

🎯jQuery操作属性

  • attr():设置或获取元素标签上的属性
  • prop():设置或获取元素标签上的属性
  • removeAttr():删除元素的一个或多个属性,如需移除若干个属性,使用空格分隔属性名称。

        提醒:一般在添加属性名称时该属性就会生效或属性只有true和false两个属性值时尽量使用prop()方法进行设置与获取,其他属性则使用attr()方法。

🎯jQuery操作节点

1.获取节点:

        通过各种选择器或选择器的组合来获取想要的网页元素。

2.创建节点:

        元素节点通过工厂函数$()直接创建,文本节点和属性节点可以随着元素节点创建时一起创建,也可以通过先创建元素节点,再使用操作内容和属性的方法产生。

3.插入节点:

        append()、prepend(): 是父元素的方法

         appendTo()、prependTo(): 是要插入的节点的方法

        before()、after(): 是要插入的节点的同辈节点的方法

        insertBefore()、insertAfter(): 是要插入的节点的方法

注意:

        插入节点的方法如果是对网页中已经存在的元素,实现的是移动效果;

         如果是对新创建的元素,实现的是插入元素的操作。

4.删除节点:

        remove():节点及所有的后代、节点上绑定的事件都被删除

        detach():绑定的事件会被保留下来

        empty():清空节点,清除所有后代

5.复制节点:

        clone():参数为true,复制元素的同时也复制元素绑定的事件

6.替换节点:

        replaceWith():

        replaceAll():

7.包裹节点:

        wrap():

        wrapAll():

        wrapInner():

7.遍历节点:

        children():

        find():

        next():

        prev():

        siblings():

        closet():获取最近匹配的祖先元素

        parent():

        parents():获取所有祖先元素

  • 15
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Y小夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值