jquery基础学习之样式篇(一)】的更多相关文章

一.安装与使用 官网下载,然后引入 <script src="js/jquery-3.3.1.js"></script>,这是生产版本,开发版本替换成min的那个 二.转换 jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素, jq转dom转换 console.log( $('div')[0]);//选出来的是dom元素 console.log( $('div').get(0));//选出来的是dom元素 dom转jq通过$(dom)方法将普通的…
一,动画效果 hide() show() 隐藏与显示 hide(options) 隐藏 对应display:none,有参数就会变成动画, $(document).click(function () { // $('.div1').hide('slow');//慢速隐藏 })hide(speed,callback) toggle() 切换隐藏与显示 $(document).click(function () { $('.div1').hide('slow',function () { conso…
在此之前请牢记,jquery 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild jq创建方法: 前三项可以合并成一个,直接向$()括号中加入要设置的html结构及内容, 然后append()添加到某个容器中 let div=$('jq创建'); $(body).append(div) 2.节点插入方法 向元素内部添加 append() 与…
理解不深,只知道这么用 jquery 中ajax的请求方法 $.ajax({ url:‘http://...’, //请求网址 type:'GET', //请求方法 success:function(data){}//成功后的回调函数,这个data就是拿到的数据 }) 跨域获取数据 ,jsonp方式跨域,只要规定 dataType:'jsonp'即可 $.ajax({ url:`https://api.douban.com/v2/book/search?q=历史`, type:'GET', da…
一.鼠标事件 click 单击 与 dbclick 双击 用于监听用户的点击操作,在同一元素上同时绑定 click 和 dblclick 事件是不可取的...根据浏览器支持不同一个点击事件是由mousedown和mouseup组成点击事件可接受两个参数,第一个为数据,第二个参数为回调函数,数据就是用来给回调函数传参的 $('.div1').click({x:'background',y:'black'},function (e) {console.log(e.data); //{x: "back…
JQuery基础学习总结 简单总结下JQuery: 一:事件 1.change事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../js/jquery-3.0.0.…
进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScript库,核心依然是JavaScript,不仅兼容了CSS3,还兼容各种浏览器--> <!--1.容易上手 2.强大的选择器 3.解决浏览器的兼容 4.完善的事件机制 5.出色三维Ajax封装 6.丰富的UI--> <!--链式操作,回调函数,迭代器,延迟对象,对象--> 这里需…
最近在慕课网学习了一些jquery的基础知识,为了方便记忆,整理出来的导图 jQuery基础总共分为4个部分,分别是样式篇.事件篇.动画篇.DOM篇. 样式篇,主要介绍jQuery的基础语法,选择器以及jQuery的一些属性和样式, 选择器的简介详见:http://www.cnblogs.com/amy-1205/p/5849568.html 事件篇,主要是鼠标事件,表单事件,键盘事件,事件的绑定和解绑以及自定义事件 动画篇,学习后制作出以下效果:隐藏和显示.上卷下来.淡入淡出.也可以通过自定义…
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局…
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几个jQuery最基本的点吧. $是jQuery的简写形式,$("#divId")和jQuery("#divId")是一样的效果.其实看到这个,学过JS的人都应该很清楚了,jQuery就是个函数对象,有个别名叫$ <html> <head> <…
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size…
Spark基础学习精髓 1 Spark与大数据 1.1 大数据基础 1.1.1 大数据特点 存储空间大 数据量大 计算量大 1.1.2 大数据开发通用步骤及其对应的技术 大数据采集->大数据预处理->大数据存储->大数据处理->大数据可视化 (1)大数据采集技术 分布式架构.多种采集技术混合使用 web数据采集:shell编程.爬虫工具.爬虫程序开发.HTTP协议.TCP/IP基本原理及Socket程序接口.编程语言.数据格式转换.分布式存储的命令和接口(HDFS.HBase等).…
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 如右边代码所示,写一个最简单的元素创建,我们会发现几个问题: 每一个元素节点都必须单独创建 节点是属性需要单独设置,而且设置的接口…
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用法是类似的,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 <div id="test">点击触发<div> $("el…
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方法的插件 大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作 封装全局函数的插件 可以理解为$.ajax这种就是封装的全局函数 选择器插件 顾名思义,封装的选择器 jQuery插件的基本要点: jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆…
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script…
一.DOM节点的创建 1.创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览…
一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   …
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&…
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数…
入口函数:ready() 当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件. 由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法.正如上面的例子中那样. ready() 函数规定当 ready 事件发生时执行的代码. ready() 函数仅能用于当前文档,因此无需选择器. 允许使用以下三种语法: 语法 1 $(document).ready(function) 语法 2 $().ready(funct…
写在前面的话: 1. 最近在自学Android,也是边看书边写一些Demo,由于知识点越来越多,脑子越来越记不清楚,所以打算写成读书笔记,供以后查看,也算是把自己学到所理解的东西写出来,献丑,如有不对的地方,希望大家给与指正. 2. 由于类似于读书笔记,可能格式神马的会比较随(hen)意(chou),大家看着受不了,可以使劲吐槽. *************************************我只是分割线***************************************…
学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都是一些插件什么的.这些W3C上面都有. 当然我自己感觉第11章,也就是jQuery的简单性能优化,虽然少了点,但这才算值得我去买一本实体书.(然而我百度了一下,貌似网上也有这样的优化,而且更多点) 好吧,小菜鸡到这里谈论大神的书,好像有点不合适,就当作胡咧咧吧. 毕竟买了本书确实起到了至关重要的作用 保护了我…
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发送和获取数据,然后更新页面. Ajax的优势 无需插件支持 优秀的用户体验 提高web程序的性能 减轻服务器和带宽的负担 Ajax的不足 浏览器兼容不足 破坏浏览器前进和后退按钮的正常功能 对搜索引擎的支持不足 开发和调试工具的 缺乏 好吧,这些都是几年前的不足.技术的发展很快,这些不足也会慢慢弥补…
这章本来准备写成jQuery的表单操作和表格操作的. 然而昨天吧jQuery的表单操作看完,发现全部在炒之前章节的剩饭,所以就没写出来. 那么今天就来看看表格吧. 因为平常做的都是公司的内部管理系统,所以说数据表格用到的还是比较多的.那么在这里写出来说不定还能用上. 关于jQuery的表格应用 隔行变色 $(function(){ $("tbody>tr:odd").addClass("样式1");//odd是选取奇数行 $("tbody>tr…
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地增强了事件处理能力. $(document).ready()只需要等文档结构加载完就能执行,而window.onload还要等到文档元素所关联的元素(比如图片)加载完才行. 而因为图片未加载完时ready()事件就执行了,因此图片的长宽属性未必有效,要想解决这个问题可以用$(document).lo…
DOM操作分为3个方面: DOM Core    任何一种支持DOM Core的语言都可以使用它,比如getElementById就是DOM Core操作 HTML-DOM  只能用来处理web文档 CSS-DOM    针对CSS的操作 关于jQuery中的DOM操作 查找节点可以很轻易通过就jQuery选择器来找到,这里略过. 创建节点 var $myli= $('<li title="troy">troy123</li>');//创建jQuery对象 $(…
jQuery提供css()的方法来实现嵌入式改变元素样式,css()方法在使用上具有多样性.其中一种接受两个输入参数:样式属性和样式值,它们之间用逗号分开.比如我们要改变链接颜色,我们可以使用下面的代码: $("#61dh a").css('color','#123456'); //这里选择器‘$("#61dh a")’表示ID为‘#61dh’的元素下的所有链接. //.css(‘color’,'#123456');表示把颜色设为'#123456' 如果我们需要改变…
一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer…
一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的c…