二、jQuery样式操作

标签样式操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jQuery-3.4.1.js"></script>
</head>
<body>
<div class="c1 c2 c3"></div>
</body>
</html>

$('div').hasClass('c1')
true

$('div').hasClass('c2')
true

$('div').hasClass('c3')
true

$('div').removeClass('c1')
k.fn.init [div.c2.c3, prevObject: k.fn.init(1)]

$('div').addClass('c1')
k.fn.init [div.c2.c3.c1, prevObject: k.fn.init(1)]

cs操作

$('p').first().css('color','red')
k.fn.init [p, prevObject: k.fn.init(2)]

$('p').first().css('color','red').next().css('color','green')
k.fn.init [p, prevObject: k.fn.init(1)]

# jQuery对象调用jQuery方法之后返回jQuery对象 也就可以继续调用

位置操作

$('p').offset() #相对于浏览器窗口
{top: 116, left: 100}left: 100top: 116__proto__: Object

$('p').position() #相对于父标签
{top: 100, left: 100}

$('window').scrollTop() #括号内不加参数就是获取 有参数就是设置
undefined

文本操作

$('div').text()
"
有些话听听就过去了，不要在意，都是成年人
"
$('div').html()
"
<p>有些话听听就过去了，不要在意，都是成年人</p>
"
$('div').text('你个')
k.fn.init [div, prevObject: k.fn.init(1)]
$('div').html('<h1>你个</h1>')
k.fn.init [div, prevObject: k.fn.init(1)]

获取值操作

$('#d1').val()
"111"

$('#d2').val()
"222"

$('#d1').val('222')
k.fn.init [input#d1]

$('#d2').val('111')
k.fn.init [input#d2]

$('#d2')[0]
<input type=​"file" value=​"222" id=​"d2">​

$('#d2')[0].files[0]
File {name: "邯郸学院 郭赛科.pdf", lastModified: 1596785921287, lastModifiedDate: Fri Aug 07 2020 15:38:41 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 249211, …}

属性操作

js中                           jQuery

setAttribute()            attr(name,value)

getAttribute()            attr(name)

removeAttribute()     removeAttr(name)

事件

<button id="d1">问我</button>
<button id="d2">亲我</button>

<script>
    // 第一种
    $('#d1').click(
        function (){
            alert('v')
        }
    )
    // 第二种
    $('#d2').on('click',function (){
        alert('2')
        }
    )
</script>

克隆事件

<button id="d1">
    屠
</button>

<script>
    $('#d1').on('click',function (){
        // alert('a')
        // console.log(this)
        $(this).clone().insertAfter('body')
    })
</script>


Python全栈开发工程师 day57 jQuery的更多相关文章

  1. 想成为Python全栈开发工程师必须掌握的技能

    什么是Python全栈工程师? 即从前端页面的实现,到后台代码的编写,再到数据库的管理,一人可以搞定一个公司网站的所有事情,真正实现全栈开发. 全栈只是个概念 也分很多种类 真正的全栈工程师涵盖了we ...

  2. python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  3. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  4. python 全栈开发，Day56(jQuery的ajax)

    昨日内容回顾 事件流: 1.事件捕获 从最外层到最内层 2.事件目标阶段 3.事件冒泡 从最内层到最外层 每个事件都会事件对象 event 属性和方法 属性: event.target 目标节点(冒泡 ...

  5. python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))

    一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...

  6. python 全栈开发，Day53(jQuery的介绍，jQuery的选择器，jQuery动画效果)

    01-jQuery的介绍 1.为什么要使用jQuery 在用js写代码时,会遇到一些问题: window.onload 事件有事件覆盖的问题,因此只能写一个事件. 代码容错性差. 浏览器兼容性问题. ...

  7. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

  8. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

  9. 老男孩Python高级全栈开发工程师【真正的全套完整无加密】

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师[真正的全套完整无加密] 课程大纲 老男孩python全栈,Python 全栈,Python教程,Django ...

  10. 老男孩最新Python全栈开发视频教程（92天全）重点内容梳理笔记 看完就是全栈开发工程师

    为什么要写这个系列博客呢? 说来讽刺,91年生人的我,同龄人大多有一份事业,或者有一个家庭了.而我,念了次985大学,年少轻狂,在大学期间迷信创业,觉得大学里的许多课程如同吃翔一样学了几乎一辈子都用不 ...

随机推荐

  1. 优先使用C++的别名声明（using）来替换typedef

    C++98中,我们如果想用简写的方式表达一个类型,那么可以使用typedef关键字: typedef std::unique_ptr<std::unordered_map<std::str ...

  2. 入门文章学习（一）-Beginner Tutorial

    Abstract: 参照"背景知识查阅"一文的学习路径,对几篇文章的学习做了记录.这是"Beginner Tutorial"一文的学习笔记. 文章链接: htt ...

  3. [Vue warn]: Duplicate keys detected: ''. This may cause an update error. found in

    原因: 使用element-ui 导致 使用路由模式之后  index 没写 导致 解决办法: 删掉  或者天添加路由

  4. jieba原理

    一.jieba介绍jieba库是一个简单实用的中文自然语言处理分词库. jieba分词属于概率语言模型分词.概率语言模型分词的任务是:在全切分所得的所有结果中求某个切分方案S,使得P(S)最大. ji ...

  5. How to Install VMware Tools on CentOS 6.5

    yum install perl gcc make kernel-headers kernel-devel -y [root@centos6 vmware-tools-distrib]# ./vmwa ...

  6. WEB开发日志1

    2020/6/11 23:23 今天做系统时,用到二级菜单,菜单下方放了一个<iframe>标签,但二级菜单的菜单项太多,导致一部分菜单项被<iframe>覆盖,从而无法再选中 ...

  7. C语言中~与!的区别

    ! 是逻辑非or否定 ​ 凡是a的值不为0的,!a 就等于0: ​ 如果a的值为0,则 !a 的值为1 而~这个是 按位取反 比如 int a=2 ; 用二进制表示为00 00 00 10; 则 !a ...

  8. mysql-连接路径url参数（随时补充及改错）

    1.基本驱动连接url jdbc:mysql://127.0.0.1:3306/demo 2.参数 参数 缺省值 说明 粘贴 useSSL 是否使用ssl加密连接mysql,一般指定false就行,除 ...

  9. c输入的缓冲区

    作业题:输入两个整数(12和37),从键盘输入'A'和'a'时,输出两个数中的较大数:从键盘输入'B'和'b'时,输出两个数中的较小数. int a; char c; scanf("%d&q ...

  10. Konga-Kong网关的权限控制指定消费者

    刚开始陷入了误区了,网上很多参考例子都是如何实现身份证验证,而且看到konga上面配置身份插件的地方基本都有consumer一个配置项,一直纠结在这个如何通过key-auth实现指定的route或者s ...