jQuery基础应用
什么是 jQuery ?
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
提示: 除此之外,Jquery还提供了大量的插件。
jQuery 语法
- 美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素
- jQuery 的 action() 执行对元素的操作
1,使用jQuery必须先导入jQuery,x.x.x.js文件
2,jQuery中的选择器:
$("选择器").函数();
①$是jQuery的缩写,即可以使用jQuery("选择器").函数();
②选择器,可以是任何CSS支持的选择符
元素选择器
jQuery 元素选择器基于元素名选取元素。
在页面中选取所有 <p> 元素:
$("p")
实例
用户点击按钮后,所有 <p> 元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#test")
实例
当用户点击按钮后,有 id="test" 属性的元素将被隐藏:
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:
$(".test")
实例
用户点击按钮后所有带有 class="test" 属性的元素都隐藏:
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
3,文档就绪函数,防止在文档未完全加载之前,运行jQuery代码,
$(document).ready(function(){
jQuery代码
});
简写形式:
$(function(){ });
【文档就绪函数和window.onload区别】
①window.onload必须等到网页中所有内容执行完后,才会加载代码。(包括图片,视频等资源)
文档就绪函数,只需要在网页DOM结构加载完毕之后,就可以执行代码。
②window.onload只能写一个,写多个只会执行最后一个。
文档就虚函数可以写多个,并且不会被覆盖。
4,原生JS对象与jQuery对象
①使用$("")选中的时jQuery对象,只能调用jQuery的函数,而不能使用元素JS的事件与函数
$("#p").click;√
$("#p").onclick = function(){} ×
解释:$("#p")是jQuery对象。 .onclick是原生JS事件
同理:使用document.getElement获取的是原生JS对象,也不能使用jQuery相关函数。
②原生JS对象转为jQuery对象
可以使用$()包裹原生JS对象,即可转为jQuery对象。
var p = document.getElementByTagName("p");
$(p).click(); √原生JS对象p已被转为jQuery对象。
③jQuery对象转为原生JS对象,使用.get(index)或[index]
$("#p").get(0).onclick = function(){}
$("#p").[0].onclick = function(){}
5,jQuery解决多库冲突
由于其他的库也会使用$作为自身标识,导致其他JS库与jQuery冲突;
要解决冲突,可以放弃使用$,直接使用jQuery对象。
【使用自执行函数传入jQuery对象简化写法】
jQuery.noConflict();//调用这个函数,将$控制权让渡给其他类库,即jQuery不能再使用$
!function(j){
函数之中就可以用字母j。代替jQuery对象
}(jQuery);
jQuery基础应用的更多相关文章
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
- jquery 基础汇总---导图篇
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以 ...
- jquery基础教程读书总结
最近静下心来看书才深刻的体会到:看书真的很重要,只有看书才能让你有心思静下心来思考. 重温<jquery基础教程> 一.事件 主要掌握常见的事件以及理解jquery的事件处理机制. 需要注 ...
- JQuery基础学习总结
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- idea启动tomcat报错:Error during artifact deployment. See server log for details.
出现这种情况的原因老夫猜想是改变了artifact然而tomcat的配置中的artifact没有重新配就会出现这种报错 打开tomcat配置 删除原来的artifact 新添加artifact 保存 ...
- Java线程池带图详解
线程池作为Java中一个重要的知识点,看了很多文章,在此以Java自带的线程池为例,记录分析一下.本文参考了Java并发编程:线程池的使用.Java线程池---addWorker方法解析.线程池.Th ...
- 在ASP.NET Core中如何支持每个租户数据存储策略的数据库
在ASP.NET Core中如何支持每个租户数据存储策略的数据库 不定时更新翻译系列,此系列更新毫无时间规律,文笔菜翻译菜求各位看官老爷们轻喷,如觉得我翻译有问题请挪步原博客地址 本博文翻译自: ht ...
- CSS中新属性calc()
CSS3的calc()使用 原文: http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html © w3cplus.com calc( ...
- VB.NET 中 ComboBox 如何清除选项--- 使用Dataset 赋值 DataSource 的时候
如题: 在 使用Dataset 赋值 DataSource 的时候,网络上很多都是:ComboBox2.DataSource = Null 然并卵,很高兴告诉大家:Null 在VB.NET中是没用的: ...
- 管中窥豹——从OVS看SDN
网络虚拟化是当前云计算最重要的特点之一,打通租户网络之间互通以及访问控制策略,最重要的是满足租户之间的网络隔离,这才是云计算网络的特点.而SDN的产生则是在网络虚拟化中,将控制面和业务面分离,控制面只 ...
- Win10系统下安装Ubuntu16.04.3教程与设置
在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...
- thinking in java 随笔
初始化顺序 在一个类里,初始化的顺序是由变量在类内的定义顺序决定的.即使变量定义大量遍布于方法定义的中间,那些变量仍会在调用任何方法之前得到初始化--甚至在构建器调用之前.例如: class Tag ...
- C# 根据路径删除文件或文件夹
如何根据路径删除文件或文件夹? 1.首先我们要判断路径是文件或者是文件夹 那么我们可以通过 FileAttributes attr = File.GetAttributes(path); 来得到路径的 ...
- 用Eclipse 创建一个 简单的 Maven JavaWeb 项目
使用Maven 创建一个简单的 javaWeb 项目: 本篇属于 创建 JavaWeb 项目的第三篇: 建议阅读本篇之前 阅读 用 Eclipse 创建一个简单的web项目 ;本篇是这这篇文章的基础 ...