jQuery菜鸟教程02
jQuery 入口函数与 JavaScript 入口函数的区别:
- jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
- JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
1:元素选择器
2:#id 选择器
3:.class 选择器
jQuery 事件
什么是事件?
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例:
- 在元素上移动鼠标。
- 选取单选按钮
- 点击元素
在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。
就是通过点击事件,触发执行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,很容易处理元素和浏览器窗口的尺寸
转载于:https://www.cnblogs.com/jiatianyi/p/10970394.html
jQuery菜鸟教程02相关推荐
- jQuery菜鸟教程03
jQuery 遍历 什么是遍历? jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素.以某项选择开始,并沿着这个 ...
- JQuery菜鸟教程笔记总结
JQuery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作 基础语法: $(selector).action() 美元符号定义 jQuery 选择符(selector) ...
- jQuery菜鸟教程04
jquery框架中包含了很多jquery插件 jQuery其他 jQuery - noConflict() 方法 如何在页面上同时使用 jQuery 和其他框架? 这个方法可以让你的jQuery中$符 ...
- jQuery菜鸟教程01
1:学前总结JavaScript内容 1:JavaScript 重点总结 2:HTML DOM 在JavaScript代码中写,用于增删改查整个页面的html元素,属性和值 3:XML DOM 在Ja ...
- jquery 菜鸟教程
https://www.runoob.com/jquery/ajax-load.html 测试方法 https://www.runoob.com/try/try.php?filename=tryjqu ...
- 复习jquery菜鸟教程
https://www.runoob.com/jquery/jquery-plugin-treeview.html 转载于:https://www.cnblogs.com/sxjljj/p/11349 ...
- JQuery菜鸟教程笔记
JQuery语法 jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作 基础语法: $(selector).action() $ :美元符号定义 jQuery () :选择符(se ...
- jQuery学习(菜鸟教程)
1.jquery安装 <head> <script src="jquery-1.10.2.min.js"></script> </head ...
- jQuery概述(查阅菜鸟教程随笔)
jQuery 是一个 JavaScript 库. jQuery 实例 在本教程中,您将通过教程以及许多在线实例,学到如何通过使用 jQuery 应用 JavaScript 效果. jQuery 在线实 ...
最新文章
- python调用c静态库,静态库(.lib)到Python项目
- Markdown语法-基础
- c++ 图的连通分量是什么_图与图论基本概念(图论算法入门)
- ubuntu16.04安装UR3/UR5/UR10机械臂的ROS驱动并实现gazebo下Moveit运动规划仿真以及真实UR3机械臂的运动控制(2)
- 【开源项目】保存YUV420数据到本地
- Page object设计模式
- 10.Partial Dependence Plots
- c语言 spawn函数,我在electron程序中spawn了一个C语言程序作为子进程,我该如何与这个子进程通信?...
- Win10笔记本可以搜索到邻居WiFi却搜不到自家的??
- UITableView 优化
- java merge_java – OptimisticLockException当使用JPA merge()
- 遇到这 4 个迹象,赶紧下来、让人工智能上!
- Codeforces 2 A. Winner
- Android中利用LinearLayout动态添加控件
- VMware提早放出好消息
- idea退出debug模式_一文搞懂如何在Intellij IDEA中使用Debug,超级详细
- Android自定义导览地图组件(二)
- 【C语言】 《弹跳的小球》游戏编写过程及思路,清屏函数、Sleep()函数的应用
- 解决飞鸽传书看不到自己想要找的好友
- python 怎么算l2范数_向量范数与矩阵范数(L0, L1, L2)