初始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是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了 ...
随机推荐
- http请求204
项目中发现一个奇怪的问题,请求的时候同一个接口有两个请求,而且有一个状态为204,有一个为200 在网上查看资料后得知,是因为跨域而引起的,OPTIONS是一种“预检请求”,浏览器在处理跨域访问的请求 ...
- 林大妈的CSS知识清单(二)可见格式化模型(内含margin塌陷与浮动闭合的解决方案)
盒模型.浮动和定位是CSS中最重要的三个概念.它们共同决定了一个元素在页面中以怎样的形式进行排布与显示. 一.盒模型 1. 定义 盒模型是CSS的核心概念.一个页面中,所有的元素(不管他最终显示是圆形 ...
- BootStrape基础使用
官网:www.bootcss.com 一. 全局css样式 栅格系统 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局 <!DOCTYPE html> < ...
- day09 并发编程
一. 目录 1.进程的概念和两种创建方式 2.多进程爬虫 3.守护进程 4.进程队列 5.进程队列简单应用(实现数据共享) 6.线程的两种创建方式 7.线程和进程的效率对比 8.线程共享统一进程的数据 ...
- Python 之 random模块
Python中的random模块用于生成随机数.1.random.random() #用于生成一个0到1的随机浮点数:0<= n < 1.0>>> random.ran ...
- Qt5配置winpCap
在网上查了很多资料,搞了差不多一天总算解决Qt5使用winPcap配置的问题了!记录一下 以便后续忘记 1.下载winpcap4.1.3,百度即可搜索到 2.下载winpCap开发者工具包http:/ ...
- 【异常】Caused by: org.apache.phoenix.coprocessor.HashJoinCacheNotFoundException:
1 详细异常 Caused by: org.apache.phoenix.coprocessor.HashJoinCacheNotFoundException: ERROR 900 (HJ01): H ...
- 剖析isinstance的实现机制
python的自省机制也是其一大彪悍的特性,对于任何一个对象,我们都可以准确的获取其类型. print(type(123)) print(type("")) print(type( ...
- arm交叉编译sudo-1.8.6p7
1.交叉编译 # tar -xvf sudo-1.8.6p7.tar.gz # cd sudo-1.8.6p7/ # mkdir build # ./configure --prefix=/home/ ...
- 修改tomcat 端口
假设tomcat所在目录为/usr/local/apache-tomcat/ 1.打开tomcat配置文件#vi /usr/local/apache-tomcat/conf/server.xml 2. ...