jQuery菜鸟教程02

时间 2019-12-12

标签 jquery 菜鸟教程栏目 JQuery 繁體版

原文原文链接

jQuery 入口函数与 JavaScript 入口函数的区别：css

jQuery 的入口函数是在 html 全部标签(DOM)都加载以后，就会去执行。
JavaScript 的 window.onload 事件是等到全部内容，包括外部图片之类的文件加载完后，才会执行。

jQuery 选择器

jQuery 选择器容许您对 HTML 元素组或单个元素进行操做。html

1：元素选择器jquery

2：#id 选择器浏览器

3：.class 选择器app

jQuery 事件

什么是事件？函数

页面对不一样访问者的响应叫作事件。学习

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。动画

实例：spa

在元素上移动鼠标。
选取单选按钮
点击元素

在事件中常常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。code

就是经过点击事件，触发执行JavaScript代码，进行增删改查页面的内容。

jQuery效果

jQuery的效果就是让div块元素，能够来回移动。实现动画效果，经过改变图像的位置，实现动态效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'},"slow");
    div.animate({width:'300px',opacity:'0.8'},"slow");
    div.animate({height:'100px',opacity:'0.4'},"slow");
    div.animate({width:'100px',opacity:'0.8'},"slow");
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认状况下，全部的 HTML 元素有一个静态的位置，且是不可移动的。 
若是须要改变为，咱们须要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

jQuery HTML

jQuery - 获取内容和属性

jQuery 拥有可操做 HTML 元素和属性的强大方法。

jQuery DOM 操做

jQuery 中很是重要的部分，就是操做 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操做元素和属性变得很容易。

得到内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操做的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

设置内容 - text()、html() 以及 val()

jQuery - 添加元素

经过 jQuery，能够很容易地添加新元素/内容。

添加新的 HTML 内容

咱们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素以后插入内容
before() - 在被选元素以前插入内容

Query - 删除元素

经过 jQuery，能够很容易地删除已有的 HTML 元素。

删除元素/内容

如需删除元素和内容，通常可以使用如下两个 jQuery 方法：

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery - 获取并设置 CSS 类

经过 jQuery，能够很容易地对 CSS 元素进行操做。

jQuery 操做 CSS

jQuery 拥有若干进行 CSS 操做的方法。咱们将学习下面这些：

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操做
css() - 设置或返回样式属性

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

jQuery 尺寸

经过 jQuery，很容易处理元素和浏览器窗口的尺寸