jquery学习:
1、什么是jQuery
jquery 全称 javaScript Query.是js的一个框架。本质上仍然是js。
2、jQuery的特点
支持各种主流的浏览器。
使用特别简单
拥有便捷的插件扩展机制和丰富的插件
3、使用jquery
引入jQuery文件
jQuery的封装原理
jQuery的选择器
jQuery操作元素的属性
jQuery操作元素的样式和内容
jQuery操作元素的文档结构
jQuery中的事件
jQuery中的动画效果。
//闭包原理:在全局区中不能够获取函数体内的数据。使用更大作用域的变量来记录小作用域变量的值。
jquery的选择器学习:
基本选择器
id选择器
标签选择器
类选择器
组合选择器
层级选择器
简单选择器
内容选择器
可见性选择器
属性选择器
子元素选择器
表单选择器
注意:
jQuery中选择器获取的是存储了HTML元素对象的数组。
jquery获取的元素对象不能够直接使用js的内容,按照数组的取出方式将对象取出后可以使用js的内容。
jquery对我们提供了多种多样的选择器来选择需要操作的HTML元素对象。
jQuery操作元素属性:
获取:
对象名.attr("属性名") //返回当前属性值
注意此种方式不能获取value属性的实时数据,使用对象名.val()进行获取。
修改
对象名.attr("属性名","属性值");
jquery 操作元素内容学习:
获取元素对象
1、获取
对象名.html()//返回当前对象的所有内容,包括HTML标签。
对象名.text()//返回当前对象的文本内容,不包括HTML标签
2、修改
对象名.html("新的内容")//新的内容会将原有内容覆盖,HTML标签会被解析执行
对象名.text("新的内容")//新的内容会将原有内容覆盖,HTML标签不会被解析
jquery操作元素的样式
1、使用css()
对象名.css("属性名")//返回当前属性的样式值
对象名.css("属性名","属性值")//增加、修改元素的样式
对象名.css({"样式名":"样式值","样式名":"样式值"……})//使用json传参,提升代码书写效率。
2、使用addClass()
对象名.addClass("类选则器名")//追加一个类样式
对象名.removeClass("类选择器 名")//删除一个指定的类样式
操作文档结构学习:
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
jQuery动态操作事件
元素对象.bind("事件名",fn)//动态的给指定的元素对象追加指定的事件及其监听的函数。
注意:
js中的是一次添加,多次添加时覆盖的效果
jQuery是追加的效果,可以实现给一个事件添加不同的监听函数。
元素对象.unBind("事件名")//移除指定的元素对象的指定事件
注意:js方式添加的事件不能移除。
元素对象.one("事件名",fn)//给指定的元素对象添加一次性事件,事件被触发执行一次即失效。
注意:可以给事件添加多个一次函数,unBind可以用来解绑
页面载入事件
$(document).ready(fn);
页面载入成功后会调用传入的函数对象
注意:
此方式可以给页面载入动态的增加多个函数对象,不会被覆盖。
jquery学习:的更多相关文章
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- jquery学习(一)
简单的jquery学习,首先在页面引入jquery <!-- 引入jquery --> <script src="js/jquery-1.8.3.js" type ...
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- jQuery 学习笔记
jQuery 学习笔记 一.jQuery概述 宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
- jQuery学习笔记(一):入门
jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- 很不错的jQuery学习资料和实例
这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关 ...
- jquery学习以及下载链接
jquery学习链接 http://www.w3school.com.cn/jquery/jquery_intro.asp jquery 脚本库下载链接 http://jquery.com/downl ...
- 转载最佳JQuery学习网站
转载文章,原出处: http://www.gbin1.com/technology/jquery/learningjquerywebsites/ jQuery是目前最流行的 JavaScript ...
- JQuery学习笔记--01
JQuery使用的话,必做的一下件事就是下载JQuery库,才可以使用下载地址:http://jquery.com/ 下面就是引用JQuery库了: <script type="tex ...
随机推荐
- qemu-img check命令详解
1.问题现象 生产环境上,对计算节点文件系统修复,导致某些虚机的镜像文件数据丢失,出现异常,最终造成虚机无法启动,查看对应计算节点的nova日志,报如下错误 nova-compute: File &q ...
- 团队作业4:第一篇Scrum冲刺博客(歪瑞古德小队)
目录 一.Alpha阶段任务认领 二.明日任务安排 三.项目预期任务量 四.敏捷开发前的感想 五.团队期望 Author:歪瑞古德小队 Project:海岛漂流 集合贴:团队作业4:项目冲刺集合贴(歪 ...
- 微众银行FATE联邦学习框架
参考:https://github.com/webankfintech/fate https://www.fedai.org/#/ 一.Docker Standalone 安装 FATE $ sh b ...
- 学生成绩管理系统(SSM+MySQL+JSP)
开发工具:Eclipse前端技术:基础:html+css+JavaScript框架:JQuery+H-ui后端技术:Spring+SpringMVC+mybatis模板引擎:JSP数据库:mysql ...
- source insight编辑matlab,不可
先说结论,我用的source insight版本是4.0x,matlab的语言包用的sourceinght官网提供的matlab.clf.链接如下:https://www.sourceinsight. ...
- Kubernetes Operator基础入门
本文转自Rancher Labs 你是否曾经想过SRE团队是如何有效地成功管理复杂的应用?在Kubernetes生态系统中,Kubernetes Operator可以给你答案.在本文中,我们将研究Op ...
- 关于idea中SpringBoot启动失败的坑
很多时候你新建了Maven 或者SpringBoot 工程,激动的点了主启动类,你就发现了下面的错误 Error starting Tomcat context. Exception: org.spr ...
- 最通俗易懂的 Redis 架构模式详解
前言 话说有一名意大利程序员,在 2004 年到 2006 年间主要做嵌入式工作,之后接触了 Web,2007 年和朋友共同创建了一个网站,并为了解决这个网站的负载问题(为了避免 MySQL 的低性能 ...
- PHP弱类型hash比较缺陷
成因分析: == 在进行比较的时候,会先将两边的变量类型转化成相同的,再进行比较 0e在比较的时候会将其视作为科学计数法,所以无论0e后面是什么,0的多少次方还是0. 因此CTF比赛中需要用到弱类型H ...
- 手机预览本地html
下载nginx,地址http://nginx.org/en/docs/windows.html 解压后替换html中内容即可 在浏览器输入http://localhost/即可预览 或者换成ip ...