jquery进阶(1)

今天我们接着来学习jQuery中的内容，包括css的操作、尺寸的操作、文档的操作、动画（有待补充），事件处理操作。

一、CSS

在css中可以设置css的基本属性

- .css("color")  -> 获取color css值

- .css("color", "#ff0000") -> 设置值

- .css({"color": "#cccccc", "border": "1px solid #ff0000"})  -> 设置多个值

- .css(["color", "border"])  -> 获取多个值

offset([coordinates])

概述：

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。此方法只对可见元素有效。

参数：

规定以像素计的 top 和 left 坐标。

值对，比如 {top:100,left:0}
带有 top 和 left 属性的对象

无参数描述:

获取第二段的偏移

html代码：

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:last");

var offset = p.offset();

p.html( "left: " + offset.left + ", top: " + offset.top );

结果：

<p>Hello</p><p>left: 0, top: 35</p>

有参数描述:

获取第二段的偏移

html代码：

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

$("p:last").offset({ top: 10, left: 30 });

position()

概述：

获取匹配元素相对父元素的偏移。

返回的对象包含两个整型属性：top 和 left。为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效。

注：

- 获取相对已经定位的父标签的位置
- 比较的是最近的那个做过定位的祖先标签

scrollTop([val])
- 返回顶部
scrollLeft([val])

其中val设置的是水平滚动条的值

二、尺寸

height([val|fn])

- 元素的高度

width([val|fn])

innerHeight()

- 带padding的高度

innerWidth()

outerHeight([soptions])

- 在innerHeight的基础上再加border的高度

outerWidth([options])

jQuery代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>尺寸</title>

    <style>

        .c1 {

            height: 100px;

            width: 80px;

            background-color: red;

        }

    </style>

</head>

<body>

<div id="d1" class="c1"></div>

<script src="jquery-3.2.1.js"></script>

</body>

</html>

执行的操作：

$('#d1').height()

$('#d1').width()

$('#d1').innerHeight()

$('#d1').css('padding',20px)

$('#d1').css('boder','2px solid #336699')

$('#d1').outerHeight()

三、文档的操作

1.内部插入

在内部插入包括append和prevend

append（content|fn）

appendTo(content)

A.append(B)

---把B添加到A的后面

A.appendTo(B)

---把A添加到B的后面

prevend(content|fn)

prevend(contend)

A.prevend(B)

---把B添加到A的前面

A.prevendTo(B)

---把A添加到B的前面

2.外部插入

在外部插入包括after和before

after(content|fn)   --> 往后加

insertAfter(content)

A.after(B)

---把B添加到A的后面

A.insertAfter(B)

---把A添加到B的后面

before(content|fn)   --> 往前加

insertBefore(content)

A.before(B)

---把B添加到A的前面

A.insertBefore(B)

---把A添加到B的前面

3.包裹

包裹(把所有匹配的元素用其他元素的结构化标记包裹起来。)

wrap(html|ele|fn)

A.wrap(B)  --> B包A

unwrap()

    - 不要加参数

wrapAll(html|ele)

--将所有匹配的元素用单个元素包裹起来

wrapInner(html|ele|fn)

--将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来

4.替换

replaceWith(content|fn)

A.replaceWith(B)  --> B替换A

replaceAll(selector)

A.replaceAll(B)   --> A替换B

5.删除

empty()

- 清空 内部清空

remove([expr])

- 删除 整体都删除

detach([expr])

- 剪切  多保存在变量中，方便再次使用

6.复制

clone([Even[,deepEven]])

例：

创建一个按钮，他可以复制自己，并且他的副本也有同样功能。

html代码：

<button>Clone Me!</button>

jQuery 代码:

$("button").click(function(){

  $(this).clone(true).insertAfter(this);

});

四、动画

基本

show([s,[e],[fn]])     图片的显示

hide([s,[e],[fn]])      图片的隐藏

toggle([s],[e],[fn])   

滑动

slideDown([s],[e],[fn])

slideUp([s,[e],[fn]])

slideToggle([s],[e],[fn])

淡入淡出

fadeIn([s],[e],[fn])

fadeOut([s],[e],[fn])

    fadeTo([[s],o,[e],[fn]])

        - 淡出到0.66透明度

    fadeToggle([s,[e],[fn]])

        - .fadeToggle(, function () {

            alert("真没用3");

        });

自定义

animate(p,[s],[e],[fn])1.8*

    - css属性值都可以设置

五、事件处理

之前绑定事件的方式：

        1. onclick=clickMe();  function clickMe() {}

        2. ele.onclick = function(){}

        3. ele.addEventListener("click", function(){})

jQuery绑定事件的方式：

        1. $(ele).on("click", function(){})

        2. $("tbody").delegate(".btn-warning", "click", function(){})

        3. $("tbody").on("click",".btn-warning",function(){})  我们要用的事件委派

jquery进阶(1)的更多相关文章

jquery 进阶
1.0 jquery的ajax同步和异步区别 2.0 cdnjquery加载失败加载本地 <script type="text/javascript" src="/ ...
python 学习笔记十三 JQuery(进阶篇)
jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. 安装jQuery 有两个版本的 jQuery 可供下载: Production versio ...
Web开发——jQuery进阶
参考: 参考:http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html 参考:Asynchronous J ...
jquery 进阶 bootstrap
. 样式操作 . 操作class . 操作CSS属性的 .css("color") .css("color", "green") .css( ...
jQuery进阶第三天（2019 10.12）
一.原生JS快捷的尺寸(属性)(注意这些属性的结果不带PX单位) clientWidth/clientHeight =====> 获得元素content+padding的宽/高: offse ...
jQuery进阶
复习: jq无论如何都是一个集合 jq是一个包装集 var arr=$("div").get( )会将所有的DOM对象转换成真正的数组, get( )里边没传参数兄弟元素: 只要 ...
jQuery进阶第四天（2019 10.13）
1 初识面向对象(面向对象是一种思维方式) 以前写的代码 var name = '莉莉'; var sex = '女'; var age = 18; var name1 = '小明'; var sex ...
jQuery进阶第二天（2019 10.10）
一.事件流程 1.事件的三要素: 事件源:发生事件的对象事件类型:类型比如单击.双击.鼠标的移入.移除事件处理程序: 触发事件之后做些什么,事件处理的函数 <body> <but ...
Jquery基础知识
//使用$操作得到的对象,都是Jquery对象如何把Jquery对象转换成dom对象?$abc 方法1:var div = $div.get(0) 方法2:var div = $div[0] 如何把 ...

随机推荐

Java探索之旅(4)——方法和Random&Math类
1.基本知识点 ❶方法在C++里面称为函数.调用方法时,应该类型兼容--即不需显式类型转换即可将形参传递给实参. ❷形参的改变不影响实参的值. ❸Java注重模块化设计和自顶向下的设 ...
网络编程之socket编程实例
简单实例1 server.c #include <stdio.h> #include <string.h> #include <stdlib.h> #include ...
6、R语言绘制带errorbar 的柱状图
转载:http://www.cnblogs.com/xudongliang/p/7283733.html data <- data.frame(mean = c(10, 15), sd = c( ...
C#回调函数的简单讲解与应用例子
using System; namespace CallBackTest{ class Program //用户层,执行输入等操作 { static void Main(string[] args) ...
C# BackgroundWorker（异步线程）
日期:2018年11月28日环境:Windows 10,VS2015 前言 .NET 类库中提供了一个快捷使用多线程的帮助类BackgroundWorker,能够快速创建一个新的线程,并能报告进度 ...
Windows form UI skinEngine的使用方法
1.安装SkinEngine(这里安装的是3.4.7) 链接: https://pan.baidu.com/s/1-kZ5KgYclshWc17jbuke5w 提取码: bp7n 复制这段内容后打开百 ...
SQL Server列属性修改
0.创建表 create table Users(Id int,Name nvarchar(32) not null,Phone nvarchar(16),Email nvarchar(128)) 1 ...
IIS 找不到.net framework 4.0/4.5程序池
通常情况下是因为没注册造成的,也有可能跟操作系统有关系以管理员身份运行cmd 打开我的电脑 C:\Windows\System32\cmd.exe,右键以管理员身份运行然后:C:\WINDOW ...
c# 衍生类和基类的构造顺序
public class MyDeriveClass :MyBaseClass { public MyDeriveClass() :base() { } int derive_int = 1; } p ...
EOS 用户权限相关命令
首先,环境相关的配置请参考https://www.cnblogs.com/hbright/p/9266420.html 在这里,我们一起看年EOS权限相关的东东.我们先查看hml这个用户的相关信息 h ...

jquery进阶(1)

无参数描述:

有参数描述:

jquery进阶(1)的更多相关文章

随机推荐

热门专题