初识jQuery
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的
JQuery的优势:
体积小,压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
引入Jquery库:
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
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);
});
</script>
原文地址:https://www.cnblogs.com/chx9832/p/11008682.html
- 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 数组属性和方法
- SSM第五讲 动态SQL与高级查询
- SSM第六讲 MyBatis的高级特性
- SSM第七讲 SpringMVC概述和基础知识详解
- SSM第八讲 SpringMVC高级特性
- SSM第九讲 Spring+SpringMVC+MyBatis框架整合
- 大型项目技术栈第一讲 Vue.js的使用
- springBoot 入门(五)—— 使用 纯注解方式 的springboot+ mybatis+junit4 整合
- 常见加载类错误分析
- 常用的ClassLoader分析
- 如何实现自己的ClassLoader
- Hacking with iOS: SwiftUI Edition - 潜力客户名单项目(三)
- 大型项目技术栈第四讲 SQL语句构建器
- redis 入门(一)——Linux环境安装测试以及基本命令演示
- 大型项目技术栈第五讲 富文本编辑器
- weblogic 11g StuckThreadMaxTime 问题解决 以及 线程池、数据库连接池参数调优