初识jQuery
时间:2019-06-12
本文章向大家介绍初识jQuery,主要包括初识jQuery使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、什么是JQuery
JQuery是对JavaScript的封装,简化了JS代码,是主流框架的基础(VUE,EasyUI,Bootstrap) 它是2006年推出的
2、JQuery的优势
(1)体积小,压缩后只有100KB左右
(2)强大的选择器
(3)出色的DOM封装
(4)可靠的事件处理机制
(5)出色的浏览器兼容性
(6)使用隐式迭代简化编程
(7)丰富的插件支持
3、引入Jquery库 JQuery加载页面触发
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
<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>
4、window.onload和$(document).ready区别
(1)window.onload只能有一个,没有简写方式,必须等待页面所有资源加载完毕之后才能触发
(2)$(document).ready可有多个,简介为$(function(){//代码}),等待页面上所有文档结构(html标签)记载完后触发
5、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>
6、JQuery常用方法和事件
<script type="text/javascript"> $(function(){ /*给显示图片按钮注册一个click事件*/ $("#show").click(function(){ $("#imgs").slideDown(3000); }); $("#hide").click(function(){ $("#imgs").slideUp(3000); }); }); </script>
7、隐式迭代
$(function(){ $("li").mouseover(function(){ //不能用$("li") $(this).css("color","blue"); }).mouseout(function(){ $(this).css("color","black"); }); });
8、JQuery对象和Dom对象的相互转换
<script type="text/javascript"> $(function(){ /*js获取dom对象*/ var dom=document.getElementById("wht5"); /alert(dom.innerHTML); alert(dom.innerText); /* 获取value属性值*/ alert(dom.value); </script>
9、jquery对象
var $jdom=$("#wht5"); alert(jdom.html()); alert(jdom.text()); /* 一般用于表单*/ alert($jdom.val());
10、Dom对象转换Jquery对象
var dom=document.getElementById("wht"); var $jdom=$(dom); $jdom.html();
11、jquery转dom对象
<script type="text/javascript"> var $jdom=$("#wht5"); var dom=$jdom[0]; var dom=$jdom.get(0); alert(dom.value); }); </script>
原文地址:https://www.cnblogs.com/tinghao/p/11009847.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 数组属性和方法