$('body > div').css("background","#bbffaa"); //和children()方法是等价的,父子关系,和parent()方法是对立的 $('body').children('div').css("background","#bbffaa"); 和$('body > div')是等价的 $('body').children().css("background"…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
$('.one + div').css("background","#bbffaa"); //和next()方法是等价的,前后关系,和prev()方法是对立的 $('.one').next('div').css("background","#bbffaa"); $('.one').next().css("background","#bbffaa"); //不指定向后查找的元素条件则返回开…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…
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.…
一.jQuery基本选择器 1.CSS选择器     在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例   标签选择器 E {                 CSS规则   }   以文档元素为选择符   ID选择器 #ID{                  CSS规则 }   以ID为选择符   类选择器 E.className{                 CSS规则 }   以文档元素的Class为选择符   群组选择器 E1,E2{   …
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size…
Jquery 学习笔记 总结 感想: 此前在做站点时用到过jquery相关,特别是Ajax相关技术.但是并没有系统的进行学习和了解Jquery的强大的功能,趁这几天跟着资料基本的了解下Jquery的特性和插件,感觉原来好多前端设计中感觉非常麻烦的东西.通过Jquery的函数和插件都非常easy的实现了而且效果极佳.这里仅仅是简单的介绍下Jquery有哪些知识点. 1.基础选择器 (1). $("button").attr("disabled","true&…
前言: 先介绍下需要用到的浏览器提供的一些原生的方法(这里不处理低版本的IE兼容问题) 创建流程比较简单,大体如下: 创建节点(常见的:元素.属性和文本) 添加节点的一些属性 加入到文档中 流程中涉及的一点方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild 如右边代码所示,写一个最简单的元素创建,我们会发现几个问题: 每一个元素节点都必须单独创建 节点是属性需要单独设置,而且设置的接口…
一.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“Write Less, Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口:具有高效灵活的c…
今天学习jQuery,看到nth-child(even)用法,特意找了下这个选择器的用法,在CSS3标准中,用法很强大. 对此,我把CSS3标准中nth-child()用法大致介绍下: CSS3伪类选择器:nth-child() 简单的归纳下nth-child()的几种用法. 第一:nth-child(number) 直接匹配第number个元素.参数number必须为大于0的整数. (EG) li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*…
目的:虽然jQuery各种各样的功能已经很完善了,但是我们还是要学会自己去编写插件.这样我们可以去封装一些项目中经常用到的专属的代码,以便后期维护和提高开发效率. jQuery插件的类型: 封装对象方法的插件 大部分jQuery的插件都属于这种,对获取的jQuery对象进行操作 封装全局函数的插件 可以理解为$.ajax这种就是封装的全局函数 选择器插件 顾名思义,封装的选择器 jQuery插件的基本要点: jQuery插件的文件名推荐为:jquery.[插件名].js,以免和其它js库插件混淆…
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几个jQuery最基本的点吧. $是jQuery的简写形式,$("#divId")和jQuery("#divId")是一样的效果.其实看到这个,学过JS的人都应该很清楚了,jQuery就是个函数对象,有个别名叫$ <html> <head> <…
一.jQuery概述 1.jQuery的优点      jQuery是一个优秀的JavaScript库,极大地简化了遍历HTML文档.操作DOM.处理事件.执行动画和开发Ajax的操作.它有以下几点优势.      (1)轻量级.      (2)强大的选择器.      (3)出色的DOM封装.      (4)可靠的事件处理机制.      (5)完善的Ajax.   2.jQuery类库说明      jQuery的库分为两种,分别是生产版和开发版.区别如下: 名称 大小 说明 jquer…
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的style属性,这里jQuery提供了一个快捷的方法.hide()来达到这个效果 $elem.hide() 提供参数: .hide( options ) 当提供hide方法一个参数时,.hide()就会成为一个动画方法..hide()方法将会匹配元素的宽度,高度,以及不透明度,同时进行动画操作 快捷参数…
进入官方网站获取最新的版本 http://jquery.com/download/    中文 https://www.jquery123.com/ <!--JQuery:轻量级的JavaScript库,核心依然是JavaScript,不仅兼容了CSS3,还兼容各种浏览器--> <!--1.容易上手 2.强大的选择器 3.解决浏览器的兼容 4.完善的事件机制 5.出色三维Ajax封装 6.丰富的UI--> <!--链式操作,回调函数,迭代器,延迟对象,对象--> 这里需…
jQuery鼠标事件之click与dbclick事件 用交互操作中,最简单直接的操作就是点击操作.jQuery提供了两个方法一个是click方法用于监听用户单击操作,另一个方法是dbclick方法用于监听用户双击操作.这两个方法的用法是类似的,下面以click()事件为例 使用上非常简单: 方法一:$ele.click() 绑定$ele元素,不带任何参数一般是用来指定触发一个事件,用的比较少 <div id="test">点击触发<div> $("el…
原生getElementsByClassName()函数的实现代码与jQuery实现代码的比较: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <style> div { width: 100px;…
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图片 styles文件夹用来存放css样式表 scripts文件夹用来存放js脚本 网页结构 头部:网站的品牌log,登录信息 内容:放置网站的主体内容 尾部:放置网站的其它友情链接和版权信息之类的 关于网站样式 首先写一个样式表,来包含全局的样式.定义整个网站的reset.css样式表,编写一些全局…
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发送和获取数据,然后更新页面. Ajax的优势 无需插件支持 优秀的用户体验 提高web程序的性能 减轻服务器和带宽的负担 Ajax的不足 浏览器兼容不足 破坏浏览器前进和后退按钮的正常功能 对搜索引擎的支持不足 开发和调试工具的 缺乏 好吧,这些都是几年前的不足.技术的发展很快,这些不足也会慢慢弥补…
关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地增强了事件处理能力. $(document).ready()只需要等文档结构加载完就能执行,而window.onload还要等到文档元素所关联的元素(比如图片)加载完才行. 而因为图片未加载完时ready()事件就执行了,因此图片的长宽属性未必有效,要想解决这个问题可以用$(document).lo…
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <…
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 是一个合集对象!!!! 1.节点创建 js创建方法: 创建元素:document.createElement 设置属性:setAttribute 添加文本:innerHTML 加入文档:appendChild jq创建方法: 前三项可以合并成一个,直接向$()括号中加入要设置的html结构及内容, 然后append()添加到某个容器中 let div=$('jq创建'); $(body).append(div) 2.节点插入方法 向元素内部添加 append() 与…
关于性能优化 合适的选择器 $("#id")会直接调用底层方法,所以这是最快的.如果这样不能直接找到,也可以用find方法继续查找 $("p")标签选择器也是直接调用底层方法,所以是第二选择 $(".class")也是直接调用底层方法,不过IE8及更早版本不支持getElementByClassName,它会采用DOM搜索方式,所以会影响性能. $("[attribute=value]")采用DOM搜索的方式,很多现代浏览器支…
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等19类内置验证规则 自定义验证规则:可以很方便地自定义验证规则 简单强大的验证信息提示:默认了验证信息提示,并提供了自定义覆盖默认提示信息的功能 实时验证:可以通过keyup或者blur事件触发验证,而不仅仅在表单提交的时候验证 使用方法: 引用jQuery库和Validation插件 <script…
--------2.0以上版本体积更小. --------CDN  内容分发网络(Content delivery network或Content distribution network,常简写成CDN)可以减少带宽,但需要保证网络正常连接. jQuery函数:jQuery()  或者写成 $()  ,使用方法:1.选择器:2.对象,如document:3.文本内容,注意这个文本内容里一定要包含至少一个 html 标签 … 不然 jQuery 会把没有 html 标签的文本内容当成是选择器来处…
一.查找节点      查找属性节点: 通过jQuery的选择器来完成.      操作属性节点: 调用jQuery对象的attr()来获取它的属性值.      操作文本节点: 通过text()方法. //1.操作文本节点:通过jQuery的text()方法 alert($("#bj").text()); $("#bj").text("南京"); alert($("#bj").text()); //2.操作属性节点 //注:…
一.安装与使用 官网下载,然后引入 <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)方法将普通的…
学习完<锋利的jQuery>,用时13天. 这期间,私底下又用了一点时间去W3C上把HTML和CSS重新过了一遍. 总的来说,收获还是蛮多的. 其实在本书里面真正重要的也就前几章,后面的都是一些插件什么的.这些W3C上面都有. 当然我自己感觉第11章,也就是jQuery的简单性能优化,虽然少了点,但这才算值得我去买一本实体书.(然而我百度了一下,貌似网上也有这样的优化,而且更多点) 好吧,小菜鸡到这里谈论大神的书,好像有点不合适,就当作胡咧咧吧. 毕竟买了本书确实起到了至关重要的作用 保护了我…