初始jquery(5)
一、什么是JQuery:
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的
二、JQuery的优势:
1.体积小,压缩后只有100KB左右
2.强大的选择器
3.出色的DOM封装
4.可靠的事件处理机制
5.出色的浏览器兼容性
7.使用隐式迭代简化编程
8.丰富的插件支持
三、JQuery的用途:
1.访问和操作DOM元素
2.控制页面样式
3.对页面事件的处理
4.方便地使用jQuery插件
5.与ajax技术完美结合
四、引入Jquery库:
JQuery库的类型分为两种,分别是开发版(未压缩版)和发布版(压缩版)
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
五、JQuery语法
$(selector).action();
$()、selector、action() : 工厂函数、选择器、方法
工厂函数$():
美元符号"$"等价于jQuery,即$()=jQuery()。$()的作用是将dom对象转化为jQuery对象,从而使用jQuery方法。
/*JQuery加载页面触发:*/ <script type="text/javascript"> /*js代码*/ window.onload=function(){ alert('js加载一'); }; /*jquery代码*/ $(document).ready(function(){ alert('Jquery加载一'); }); jQuery(document).ready(function(){ alert('Jquery加载二'); }); /*对Jquery加载上面两种方式的简写*/ $(function(){ alert('Jquery加载三'); }); </script>
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常用方法和事件:详情请见W3C
$(function(){ /*给显示图片按钮注册一个click事件*/ $("#show").click(function(){ $("#imgs").slideDown(3000); }); $("#hide").click(function(){ $("#imgs").slideUp(3000); }); }); ---------------------------------------- $(function(){ $("li").mouseover(function(){ //不能用$("li") $(this).css("color","blue"); }).mouseout(function(){ $(this).css("color","black"); }); }); 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); });
初始jquery(5)的更多相关文章
- 初始jQuery
JQuery是继prototype之后又一个优秀的Javascript库.它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera ...
- jQuery从小白开始---初始jQuery
jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQuery最主要的用途就是用来做查询(jQuery=js+Query),正如jQuery官方Logo副标题所说(w ...
- 第五章 初始jQuery
jQuery与JavaScript: jQuery的用途: 访问和操作DOM元素: 控制页面样式: 对页面事件的处理: 方便地使用jQuery插件: 与Ajax技术的完美结合: jQuery的优势: ...
- 使用jQuery快速高效制作网页交互特效--初始jQuery
一. jQuery基本概念介绍 1.1 什么是jQuery一个javascript库,把常用方法写到一个js文件中,需要的时候直接调用即可学习jQuery就是学习一些方法 ...
- jQuery的2把利器
<!-- $是一个函数,首先是给window添加$,然后该值是一个函数,函数返回的值是对象.1. jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直 ...
- JavaQuery
1.初识jQuery <!DOCTYPE html> <html> <head lang="en"> <meta charse ...
- JQuery EasyUI 初始
基于jQuery的用户界面插件集合 1. jQuery easyui提供了一个完整的组件的集合,包括强大的DataGrid,树网格,面板.用户可以使用他们一起,或者只是用一些组件,组合和构建他想要的跨 ...
- 前端 --- 6 jQuery 初始
一.引入方式 1.直接下载文件到本地(最常用),从本地中导入 2.使用文件的网络地址,就像我们img标签里面的那个src的用法差不多. 引入完之后,就可以直接使用jQuery的语法来写了,但是还是要写 ...
- jquery源码学习-初始(1)
最近几天一直在研究jquery源码,由于水平太低看得昏头转向.本来理解的也不是很深刻,下面就用自己的想法来说下jquery是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了 ...
随机推荐
- WAV格式文件无损合并&帧头数据体解析(python)(原创)
一,百度百科 WAV为微软公司(Microsoft)开发的一种声音文件格式,它符合RIFF(Resource Interchange File Format)文件规范,用于保存Windows平台的音频 ...
- java——HashSet中add()方法不能加重复值得原因理解(我们一起来看底层代码吧)
Set<String> names = new HashSet<>(); names.add("张三"); names.add(new String(&qu ...
- 对接外网post,get接口封装类库
public class HttpHelper { public static string GetAsync(string url) { HttpWebRequest request = WebR ...
- 【原创】大数据基础之Kudu(5)kudu增加或删除目录/数据盘
kudu加减数据盘不能直接修改配置fs_data_dirs后重启,否则会报错: Check failed: _s.ok() Bad status: Already present: FS layout ...
- docker 卸载旧版本
列出docker安装过的相关包: sudo yum list installed | grep docker 删除相关安装包 sudo yum -y remove docker-ce.x86_64su ...
- Linux 永久挂载镜像文件和制作yum源
Linux mount命令是经常会使用到的命令,它用于挂载Linux系统外的文件. 1.镜像挂载到系统指定目录下:[root@master cdrom]# mount -t auto /mnt/c ...
- Delphi 音频播放
樊伟胜
- DBUtils封装数据库返回对象的各种方法
①ArrayHandler: 将查询结果的第一行数据,保存到Object数组中 ②ArrayListHandler 将查询的结果,每一行先封装到Object数组中,然后将数 ...
- python网络编程:socket套接字
一.socket 二.TCP服务器 三.TCP客户端 四.UDP服务器 五.UDP客户端 六.聊天的客户端 七.聊天的服务器 一.socket """ 学习网络编程 其实 ...
- 建立一个可以不停地接收客户端新的连接,但不能处理复杂的业务的C/S网络程序
在Windows平台上主要有两个版本的Socket Api函数:WinSock 1.1和WinSock 2.2 , 2.2版本默认兼容1.1版本,1.1 winsock.h wsock32.lib w ...