初始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是如何定义构造函数初始化的.如果有什么不对的地方,希望个位高手指出. 首先要了 ...
随机推荐
- 【IntelliJ IDEA】从资源文件读取出来就中文乱码的解决方法
在application.properties资源文件中设置两个自定义的属性以及属性值: com.sxd.name = "德玛西亚" com.sxd.want = "王者 ...
- Vuex是什么?
记得去年公司招聘前端工程师的时候,我要负责准备面试题去考验面试者,让我记忆深刻的有一件事,我看大多数面试者简历上都写了熟练掌握Vuex,然而当我问起的时候,大部分回答都支支吾吾,解释不清,而当我提起与 ...
- spring boot 学习笔记(三)之 配置
一:概述 在Spring boot 中根据业务需求,我们往往会在不同地方配置我们所需的key-value 配置项,配置文件存在不同的地方的场景如下: (1) 默认存在 application.prop ...
- Zend 3.3.0安装 ZendOptimizer 3.3.0 for Windows 稳定版 下载
用的某php网站系统今天打开时乱码了(zend 200407...),但phpmyadmin能正常使用: 搜索下,重新安装zend可以解决,系统上原来的版本是Zend 3.3.0:下了个,安装后果然把 ...
- 用Fiddler模拟低速网络环境【转】
原文链接:http://caibaojian.com/fiddler.html 我们为什么要限速 限速对于web前端研发是非常重要的,由于开发者的机器一般配置都很高,并且是在localhost下来调试 ...
- python numpy 的用法—— bincount
今天看脚本的时候遇到了几个不懂的用法,记录下来供日后查看: 1.numpy bincount 先上图: 如上所示:首先要求输入的数组不能包含负数: 该函数是计算非负元素的个数,如果数组中的最大值为10 ...
- vue页面中图片不显示解决
在做新版组态界面的时候,用vue框架实现,在配置页面图片的时候发现有一张图片明明页面输入的路径是对的可是图片就是不显示出来 现象: network页面资源也不报错,而且状态码竟然还是200,点prev ...
- vue-路由动态切换title
router.js { path: '/nav', component: () => import('../view/nav.vue'), meta:{ title:'nav', } }, { ...
- 1、CentOs安装
转载自:代码之美 0.准备工作: 一台没系统的普通电脑u盘一个(大于1G,最小安装的话不超过1G,根据选择系统大小匹配U盘即可)CentOS7.3 iso文件一个UltraISO工具 1.制作U盘 ① ...
- SpringBoot面试题
详见:https://www.cnblogs.com/3xmq/p/springboot.html https://blog.csdn.net/yuzongtao/article/details/84 ...