jQuery基础
1.认识jQuery
1.jQuery简介:
jQuery是继Prototype之后又一个优秀的JavaScript库,是由美国人John Resig于2006年创建的开源项目
2.jQuer的用途:
- 访问和操作DOM元素 :使用jQyery可以很方便地获取和修改页面中的指定元素,无论是删除、移动还是复制某元素,jQuery都提供了一整套方便,快捷的方法,即减少了代码的编写,又大大提高了用户对页面的体验。
- 控制页面样式:通过引入jQuery,程序开发人员可以很便捷地控制页面地CSS地文件。使用jQuery操作页面样式可以很好地兼容各种浏览器。
- 对页面事件地处理:可以使页面的表现层与功能开发分离,开发者更多地专注于程序的逻辑与功效;页面设计者侧重于页面的优化与用户体验。通过事件绑定机制,可以很轻松地实现两者地结合。
- 方便地使用jQuery插件:引入jQuery后,可以使用大量地jQuery插件来完善页面地功能和效果,如jQuery UI插件库、Form插件、Validate插件等。
- 于Ajax技术地完美结合:利用Ajax异步读取服务器数据地方法,极大地方便了程序的开发,增强了页面交互,提升了用户体验;而引入jQuery之后,不仅完善了原有的功能,还减少了代码的书写,通过其内部对象或函数,加上几行代码就可以实现复杂的功能。
3.jQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM封装
- 可靠的事件处理机制
- 出色的浏览器兼容性
- 隐式迭代
- 丰富的插件支持
2.jQuery语法结构
$(selector).action();
1.工厂函数$()
在jQuery中,美元符号"$"等价于jQuery,即$()=jQuery()。$()的作用是将DOM对象转化为jQuery对象,只有将DOM对象转化为jQuery对象后,才能使用jQuery的方法。
2.选择器selector
jQuery支持CSS1.0到CSS3.0规则中所有的选择器
$("#userName"); //获取DOM中的id为userName的元素
$("div"); //获取DOM中所有的div元素
$(".content"); //获取DOM中class为content的元素
3.方法action()
window.onload和$(document).ready区别:
window.onload只能有一个,没有简写方式,必须等待页面所有资源加载完毕之后才能触发
$(document).ready可有多个,简介为$(function(){//代码}),等待页面上所有文档结构(html标签)记载完后触发
JQuery设置样式:
<script type="text/javascript"> /*操作样式addClass()方法*/ $(function(){ //其实上就是动态的给标签加了一个class属性 /* $("#whtdiv").addClass("wht"); */ //单个设置css /* $("#lldiv").css("color","yellow"); //设置多个 $("#lldiv").css({"border":"1px solid blue","background-color":"pink"}); //链式方式 $("#whtdiv").css("color","green").css("border","1px solid blue"); */ //下一个元素 $("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange"); }); </script>
JQuery对象和Dom对象的相互转换:
<script type="text/javascript"> $(function(){ /*js获取dom对象*/ /* var dom=document.getElementById("wht5"); */ /* alert(dom.innerHTML); */ /* alert(dom.innerText); */ /* 获取value属性值*/ /* alert(dom.value); */ /*jquery对象*/ /* var $jdom=$("#wht5"); */ /* alert(jdom.html()); */ /* alert(jdom.text()); */ /* 一般用于表单*/ /* alert($jdom.val()); */ /*Dom对象转换Jquery对象*/ var dom=document.getElementById("wht"); var $jdom=$(dom); $jdom.html(); /*jquery转dom对象*/ var $jdom=$("#wht5"); var dom=$jdom[0]; /* var dom=$jdom.get(0); */ alert(dom.value); }); </script>
原文地址:https://www.cnblogs.com/yjc1605961523/p/11009719.html
- java:如何让程序按要求自行重启?
- linux:nohup 不生成 nohup.out的方法
- 让VIM支持Python2 by update-alternatives
- Angular中ngCookies模块介绍
- 如何让jboss eap 6.2+ 的多个war应用共享 jar 包?
- scala 学习笔记(07) 一等公民的函数
- 让BASH,VIM美美的Powerline
- 极品三数666.cn易主,价格让人大惊!
- ui-router中使用ocLazyLoad和resolve
- rpc框架之 avro 学习 2 - 高效的序列化
- rpc框架之HA/负载均衡构架设计
- 使用Docker-Docker for Web Developers(2)
- 打造高效前端工作环境-tmuxinator
- 在Linux Mint上安装node.js和npm
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
- 使用laravel的Eloquent模型如何获取数据库的指定列
- php 使用 __call实现重载功能示例
- laravel excel 上传文件保存到本地服务器功能
- PHP用swoole+websocket和redis实现web一对一聊天
- Yii框架布局文件的动态切换操作示例
- 关于laravel 子查询 & join的使用
- PHPUnit + Laravel单元测试常用技能
- php接口隔离原则实例分析
- laravel实现按月或天或小时统计mysql数据的方法
- laravel model模型处理之修改查询或修改字段时的类型格式案例
- 对laravel的session获取与存取方法详解
- php 中self,this的区别和操作方法实例分析
- Laravel使用原生sql语句并调用的方法
- Yii框架自定义数据库操作组件示例