jquery设置宽_JavaScript学习笔记(三十二) jQuery(中)

jQuery

  • 昨天讲了 jQuery 的基本选择器筛选器和属性操作

  • 今天来说一些 jQuery 别的东西

元素操作

  • 创建一个元素

var div = $(')
  • 内部插入元素

// 向 div 元素中插入一个 p 元素,放在最后$('div').append($('))// 把 p 元素插入到 div 中去,放在最后$('

hello

').appendTo($('div'))// 向 div 元素中插入一个 p 元素,放在最前$('div').prepend($('))// 把 p 元素插入到 div 中去,放在最前$('

hello

').prependTo($('div'))
  • 外部插入元素

// 在 div 的后面插入一个元素 p$('div').after($('))// 在 div 的前面插入一个元素 p$('div').before($('))// 把 p 元素插入到 div 元素的后面$('div').insertAfter($('))// 把 p 元素插入到 div 元素的前面$('div').insertBefore($('))
  • 替换元素

// 把 div 元素替换成 p 元素$('div').replaceWith($('))// 用 p 元素替换掉 div 元素$(').replaceAll($('div'))
  • 删除元素

// 删除元素下的所有子节点$('div').empty()// 把自己从页面中移除$('div').remove()
  • 克隆元素

// 克隆一个 li 元素// 接受两个参数//   参数1: 自己身上的事件要不要复制,默认是 false//   参数2: 所有子节点身上的事件要不要复制,默认是 true$('li').clone()

元素尺寸

  • 操作元素的宽和高

// 获取 div 元素内容位置的高,不包含 padding 和 border$('div').height()// 设置 div 内容位置的高为 200px$('div').height(200)// 获取 div 元素内容位置的宽,不包含 padding 和 border$('div').width()// 设置 div 内容位置的宽为 200px$('div').width(200)
  • 获取元素的内置宽和高

// 获取 div 元素内容位置的高,包含 padding 不包含 border$('div').innerHeight()// 获取 div 元素内容位置的宽,包含 padding 不包含 border$('div').innerWidth()
  • 获取元素的外置宽和高

// 获取 div 元素内容位置的高,包含 padding 和 border$('div').outerHeight()// 获取 div 元素内容位置的高,包含 padding 和 border 和 margin$('div').outerHeight(true)// 获取 div 元素内容位置的宽,包含 padding 和 border$('div').outerWidth()// 获取 div 元素内容位置的高,包含 padding 和 border 和 margin$('div').outerWidth(true)

元素位置

  • 元素相对页面的位置

// 获取 div 相对页面的位置$('div').offset() // 得到的是以一个对象 { left: 值, top: 值 }// 给 div 设置相对页面的位置$('div').offset({ left: 100, top: 100 })// 获取定位到一个距离页面左上角 100 100 的位置
  • 元素相对于父元素的偏移量

// 获取 div 相对于父元素的偏移量(定位的值)$('div').position()
  • 获取页面卷去的高度和宽度

window.onscroll = function () {    // 获取浏览器卷去的高度    console.log($(window).scrollTop())}window.onscroll = function () {    // 获取浏览器卷去的宽度    console.log($(window).scrollLeft())}

元素事件

  • 绑定事件的方法

// 给 button 按钮绑定一个点击事件$('button').on('click', function () {    console.log('我被点击了')})// 给 button 按钮绑定一个点击事件,并且携带参数$('button').on('click', { name: 'Jack' }, function (e) {    console.log(e) // 所有的内容都再事件对象里面    console.log(e.data) // { name: 'Jack' }})// 事件委托的方式给 button 绑定点击事件$('div').on('click', 'button', function () {    console.log(this) // button 按钮})// 事件委托的方式给 button 绑定点击事件并携带参数$('div').on('click', 'button', { name: 'Jack' }, function (e) {    console.log(this) // button 按钮    console.log(e.data)})
  • 移除事件

// 给 button 按钮绑定一个 点击事件,执行 handler 函数$('button').on('click', handler)// 移除事件使用 off$('button').off('click', handler)
  • 只能执行一次的事件

// 这个事件绑定再 button 按钮身上// 当执行过一次以后就不会再执行了$('button').one('click', handler)
  • 直接触发事件

// 当代码执行到这里的时候,会自动触发一下 button 的 click 事件$('button').trigger('click')

可以直接使用的常见事件

  • 可以直接使用的事件就是可以不利用 on 来绑定,直接就可以使用的事件方法

  • click

// 直接给 div 绑定一个点击事件$('div').click(function () {    console.log('我被点击了')})// 给 div 绑定一个点击事件并传递参数$('div').click({ name: 'Jack' }, function (e) {    console.log(e.data)})
  • dblclick

// 直接给 div 绑定一个双击事件$('div').dblclick(function () {    console.log('我被点击了')})// 给 div 绑定一个双击事件并传递参数$('div').dblclick({ name: 'Jack' }, function (e) {    console.log(e.data)})
  • scroll

// 直接给 div 绑定一个滚动事件$('div').scroll(function () {    console.log('我被点击了')})// 给 div 绑定一个滚动事件并传递参数$('div').scroll({ name: 'Jack' }, function (e) {    console.log(e.data)})
  • hover

// 这个事件要包含两个事件处理函数// 一个是移入的时候,一个是移出的时候触发$('div').hover(function () {    console.log('我会再移入的时候触发')}, function () {    console.log('我会在移出的时候触发')})

动画

  • show

// 给 div 绑定一个显示的动画$('div').show() // 如果元素本身是 display none 的状态可以显示出来// 给 div 绑定一个显示的动画// 接受三个参数// $('div').show('毫秒', '速度', '回调函数') $('div').show(1000, 'linear', function () {    console.log('我显示完毕')})
  • hide

// 给 div 绑定一个隐藏的动画$('div').hide() // 如果元素本身是 display block 的状态可以隐藏起来// 给 div 绑定一个显示的动画// 接受三个参数// $('div').show('毫秒', '速度', '回调函数') $('div').hide(1000, 'linear', function () {    console.log('我隐藏完毕')})
  • toggle

// 给 div 绑定一个切换的动画$('div').hide() // 元素本身是显示,那么就隐藏,本身是隐藏那么就显示// 给 div 绑定一个显示的动画// 接受三个参数// $('div').show('毫秒', '速度', '回调函数') $('div').toggle(1000, 'linear', function () {    console.log('动画执行完毕')})
  • animate

// 定义一个自定义动画$('.show').click(function () {$('div').animate({    width: 500,    height: 300      }, 1000, 'linear', function () {          console.log('动画运动完毕')      })})
  • stop

// 立刻定制动画$('div').stop() // 就停止再当前状态
  • finish

// 立刻结束动画$('div').finish() // 停止在动画结束状态

更多推荐

   JavaScript学习笔记(三十)-- 设计模式   JavaScript学习笔记(二十八)-- Promise   JavaScript学习笔记(二十六)-- cookie   JavaScript学习笔记(二十五)-- HTTP   JavaScript学习笔记(二十一)-- 构造函数f8d959c43f9585a91b345d7f11017154.png daa4786e81d292a9f9dd224732f5cbe9.png苦逼的日子,有你真好20a04fffb74e45777bf6754c26998ba3.gif看见这个分享了吗,点它

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427286.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

面向对象--内置方法

__名字__ 类中的特殊方法\内置方法 双下方法 魔术方法 magic_method 类中的每一个双下方法都有它自己的特殊意义 1.__call__ 相当于 对象() class A:def __call__(self, *args, **kwargs):print(执行call方法了) a A() a() # 对象() 相当于调用__call__方法 A()()…

python自动化框架测试实操_自动化框架之 python+selenium+pytest

1.概述 selenium: 基于JavaScript代码库的自动化测试框架,通过脚本语言,模拟用户行为操作,最接近用户真实场景,实现对web自动测试。 Selenium,是目前的最火爆企业最主流的webUI自动化框架 pytest: pytest是…

mysql 关联查询慢_mysql慢查询语句分析总结

我们经常会接触到MySQL,也经常会遇到一些MySQL的性能问题。我们可以借助慢查询日志和explain命令初步分析出SQL语句存在的性能问题通过SHOW FULL PROCESSLIST查看问题SHOW FULL PROCESSLIST相当于select * from information_schema.processlist可以列出正在运行的连…

python opencv3 轮廓检测

git:https://github.com/linyi0604/Computer-Vision 1 # coding:utf82 3 import cv24 import numpy as np5 6 # 创建一个200*200 的黑色空白图像7 img np.zeros((200, 200), dtypenp.uint8)8 # 在图像的中央位置 放置一个100*100的白色方块9 img[50:150, 50: 150] …

CentOS7搭建NTP服务器

搭建ntp服务器 查看服务器、客户端操作系统版本 2查看服务器是否安装ntp 3如果没有安装 4安装完成后重新查看服务器是否安装ntp 5查看ntp服务器状态 6修改配置文件 注释 #server 0.centos.pool.ntp.org iburst #server 1.centos.pool.ntp.org iburst #server 2.centos.p…

mysql 5.7.21-linux_MySQL 5.7.21 Linux平台安装 Part 2

从今天开始MySQL相关方面的东西今天是关于MySQL的安装系统为 redhat 6.10数据库为MySQL 5.7.21PS:目前最新版本为MySQL 5.7.251. 目录规划2. MySQL 5.7 下载目前MySQL 社区的GA 提供5 和8 的下载由于目前大多数系统用的还是5的版本这里统一使用5的版本注意,下面是按…

session很快失效_深夜,我偷听到程序员要对session下手...

我是一个web服务器我的工作是给人类提供上网服务,我每天要为数以万计的人提供网页浏览服务。已经是深夜了,我还在和手下几个兄弟为了一件事紧张讨论着。“老大,现在咱们每天处理的请求越来越多了,session同步的问题不能再拖了&…

centos7安装samba服务器

1查看是否安装samba服务 2如果为空则没有安装,安装显示安装完成即成功 3查看samba状态 4查看配置文件的位置 5配置文件备份,直接传输到本地备份 6修改配置文件 Path共享目录位置 Valid users 可以查看的用户 Browseable可以查看共享文件夹的目录&a…

微信小程序—day01

前言 听说谷歌准备回中国了,玩了一下谷歌刚入驻微信的小程序:“猜画小歌”,又一次见识到了ai的强大魅力。看来python之路,前途还是一片光明的。 因为18年初时的“跳一跳”,带火了微信小程序,一直想要写一个…

Mysql索引示例_MYSQL索引实例

MYSQL描述:一个文章库,里面有两个表:category和article。category里面有10条分类数据。article里面有 20万条。article里面有一个"article_category"字段是与category里的"category_id"字段相对应的。 article表里面已经…

docker mysql 操作_[Docker] Docker 快速搭建本地MySQL开发环境

[Docker] Docker 快速搭建本地MySQL开发环境关于 Docker 的安装使用本文不再赘述,有兴趣的可以通过官网或是浏览我的专栏文章了解。今天着重给大家介绍下如何利用Docker快速搭建一个MySQL的环境,来协助本地开发。TOC手机用户请横屏获取最佳阅读体验&…

centos7安装DHCP服务器

1检查防火墙和selinux(关闭) 关闭防火墙和selinux,这边不多说 2检查DHCP状态 3安装DHCP软件包 4把系统默认的样例复制 5修改配置文件 option domain-name “example.org”; --DNS域名 option domain-name-servers ns1.example.org, ns2.…

python装饰器解析_Python 装饰器解析

一、装饰器定义:本质是函数,(装饰其他函数)就是为其他函数添加附加功能 二、装饰器的作用:在不改变原函数的情况下,为原函数前后添加新的功能 三、装饰器的原则: 1、不能修改被装饰的函数的源代…

odbc远程连接mysql_无法使用unixodbc,libmyodbc连接到远程mysql服务器

我在这方面有点绿,我希望我遇到的问题很简单……编辑:底部的新信息我需要连接到远程mysql(Amazon RDS)数据库.在完成一些教程之后,我在客户端上安装并配置了unixodbc和libmyodbc,但是当我尝试通过isql连接时,我收到错误[08S01][unixODBC][MySQL][ODBC 5.1 Driver]Ca…

centos7网卡识别不到,无法远程工具连接

这是在安装dhcp的时候遇到的问题,远程工具连接不上了。没IP地址没得玩 解决办法 直接在虚拟机打开终端,找到配置文件ifcfg-ens33 TYPE“Ethernet” PROXY_METHOD“none” BROWSER_ONLY“static”----原先的dhcp换成static BOOTPROTO“no” DEFROUTE“ye…

Python_面向对象_zipfile和tarfile

#python压缩解压模块: zipfile tarfile#--zipfile模块   后缀为zip zipfile.ZipFile(file[, mode[, compression[, allowZip64]]]) *ZipFile(路径包名,模式,压缩or打包,可选allowZip64) 功能:创建一个ZipFile对象,表示一个zip文件.参数: -参数file表…

python爬虫脚本ie=utf-8_Python反爬虫伪装浏览器进行爬虫

对于爬虫中部分网站设置了请求次数过多后会封杀ip,现在模拟浏览器进行爬虫,也就是说让服务器认识到访问他的是真正的浏览器而不是机器操作 简单的直接添加请求头,将浏览器的信息在请求数据时传入: 打开浏览器--打开开发者模式--请…

python unittest生成html报告_python unittest--HTMLTestRunner生成报告

同一个目录下test1.pyimport unittestclass test1(unittest.TestCase):u"类1的测试用例"def test1(self):u"测试用例1"print "test001lalala"def test2(self):u"测试用例2"print "test002hahaha"test2.pyimport unittestcla…

centos7加入第二块网卡无法识别

本来是做DHCP服务加一块网卡的,然后识别不出来,没得玩 centos7加入第二块网卡无法识别 1发现只有一块网卡 2使用nmcli con show命令,查看网卡的UUID信息,记下UUID值 3启动networkManager’ 4识别 5使用ip addr命令查看网卡信息…

Redis学习笔记(五) 总结

为什么使用redis 改善性能。当大SQL执行耗时久,且结果不频繁变动,就特别适合将运行结果放入缓存,后面的请求从缓存中读取,使得请求能够迅速响应 缓解并发压力。大并发下,所有请求都是直接访问数据库的&a…