认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法
(一)认识JQuery
JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法
JQuery的主旨:以更少的代码,实现更多的功能
(二)JQuery的优势
1)可以像CSS一样访问和操作DOM
2)修改CSS控制页面外观
3)简化JS代码操作
4)事件代理更加容易
5)动画效果使用方便
6) Ajax技术更加完美
7)大量的基于Jquery的插件
8)可以自定义扩展功能插件
(三)JQuery的语法
格式:$(selector).action()
美元符号$本身是Jquery对象的缩写
选择符selector查询和查找HTML元素
Action执行对元素的操作
实例:$("p").hide():隐藏P元素
这里提供一个JQuery的在线API:http://jquery.cuishifeng.cn/
(四)多库冲突
解决多库冲突:jQuery.onConflict()方法放弃$符号,后面使用JQuery对象的时候就不能在使用$符号,而要使用JQuery
(五)原生JS对象和JQuery对象之间的转换
JS对象--》JQuery对象:
var p=document.getElementById('p');
$(p);//转换成JQuery对象了
JQuery对象--》JS对象:
$(p).get(0)或者$(p)[0]//这样就得到JS原生对象了
(六)DOM操作
1)设置元素以及内容:
方法名 描述
html() 获取元素中的HTML内容
html(value) 设置元素中HTML内容
text() 获取元素中文本内容
text(value) 设置元素中文本内容
val() 获取表单元素中的文本内容
val(value) 获取表单元素中的文本内容
2)操作元素属性 //说明:这是对标签元素属性的操作,不是CSS样式表中的属性
attr(key) 获取元素key属性的属性值
attr(key,value) 设置元素key属性的属性值
attr({key1:value1,key2:value2}) 设置元素多个key属性的属性值,方法的参数就是一个Object对象
attr(key,function(index,value){}) 设置元素key通过fn来设置
3)操作CSS样式
方法名 描述
css({name1:value1,name2:value2}) 设置元素多个CSS样式
addClass(class) 给每个元素添加一个CSS类
addClass(class1 class2 class3) 给元素增加多个CSS类
remove(class) 删除元素的一个CSS类
removeClass(class1 class2 class3) 删除元素的多个CSS类
toggleClass(class) 来回切换默认样式和指定样式
认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法的更多相关文章
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
- JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
- js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
- (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法
将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...
- jQuery使用(三):DOM操作之val()方法操作表单元素value值
操作表单元素属性value的值 <form action="./" method='GET'> <h3 >选择你喜欢的明星</h3> <s ...
- jQuery 第四章 实例方法 DOM操作之data方法
jquery 里面 的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上 有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- jQuery -- 光阴似箭(一):初见 jQuery -- 基本用法,语法,选择器
jQuery -- 知识点回顾篇(一):初见jQuery -- 基本用法,语法,选择器 1. 使用方法 jQuery 库位于一个 JavaScript 文件中,其中包含了所有的 jQuery 函数. ...
- jQuery实例化的优势,为什么要有实例化,到底实例化后在解决什么问题?
jQuery实例化对象的方法相比于普通方法 优势: 1.不需要出现大量的new关键字. 2.可实现链式写法. 3.书写更方便 实例化的原因: 1.实例化有利于管理程序中不同的DOM选择和处理(不同的选 ...
随机推荐
- Git详细教程(2)---多人协作开发
Git可以完成两件事情: 1. 版本控制 2.多人协作开发 如今的项目,规模越来越大,功能越来越多,需要有一个团队进行开发. 如果有多个开发人员共同开发一个项目,如何进行协作的呢. Git提供了一个非 ...
- JavaWeb学习笔记三 Servlet
Servlet 是运行在服务端的Java小程序,是sun公司提供一套规范(接口),用来处理客户端请求.响应给浏览器的动态资源.但servlet的实质就是java代码,通过java的API,动态的向客户 ...
- 浅谈RMQ
RMQ是一类求区间极值的问题 有一种 \(O\left(nlogn\right)\) 的解法,用倍增实现 倍增算法 变量的定义 \(A_i\) : 原数组 \(f_{i,j}\) : 以 \(i\) ...
- beta冲刺4
昨天的问题: 我的社团数据库表项的处理,代码修改后结果无法显示. 帖子内容无法显示出来. 首页图像未替换 登陆整合没有完成 今天的完成: 服务器部署成功 页面背景修改.(已上传,未确认实装.) 任务截 ...
- Beta冲刺 第二天
Beta冲刺 第二天 1. 昨天的困难 由于前面的冲刺留下的问题很多,而且混乱的代码给我们接下来的完善工作带来了巨大的困难. 2. 今天解决的进度 潘伟靖: 1.对代码进行了review 2.为系统增 ...
- 项目Beta冲刺Day6
项目进展 李明皇 今天解决的进度 进行前后端联动调试 明天安排 完善程序运行逻辑 林翔 今天解决的进度 服务器端发布消息,删除消息,检索消息,个人发布的action 明天安排 图片功能遇到问题,微信小 ...
- python利用twilio模块给自己发短信
1.访问http://twilio.com/并填写注册表单.注册了新账户后,你需要验证一个手机号码,短信将发给该号码. 2.Twilio 提供的试用账户包括一个电话号码,它将作为短信的发送者.你将需要 ...
- C语言Linix服务器网络爬虫项目(二)项目设计和通过一个http请求抓取网页的简单实现
我们通过上一篇了解了爬虫具体要实现的工作之后,我们分析得出的网络爬虫的基本工作流程如下: 1.首先选取一部分精心挑选的种子URL: 2.将这些URL放入待抓取URL队列: 3.从待抓取URL队列中取出 ...
- 释义Oracle 11r2中并行执行相关参数
因最近对现场某些服务器进行诊断和调整,用到了这类参数,因此对这类参数做了详尽的查阅和研究,现将该类参数释义如下,以方便同行和自己参考,禁止转载: 1.PARALLEL_ADAPTIVE_MULTI_U ...
- Java KeyTool command
Create a new key: keytool -genkey -alias keyAlias -keyalg RSA -validity 1000 -keystore d:\keyPath\k ...