Jquery 简明介绍
http://www.cnblogs.com/luotianshuai/p/5196997.html
http://www.cnblogs.com/liujianzuo888/articles/5686777.html
http://www.cnblogs.com/Wxtrkbc/p/5661047.html
http://www.cnblogs.com/wupeiqi/articles/4457274.html 【武SIR jquery 】
前端之 Jquery
一、 jquery简介
1 、jquery是什么
- jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
- jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。
- 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。
- jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
- jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
- jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
2 、什么是jQuery对象?
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
例子1:
$("#test").html() 意思是指:获取ID为test的元素内的 html 代码。其中html()是jQuery里的方法 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。
约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
写在前面 jquery中的$ 就是JQuery 对象,二者相等 $ = JQuery
$( ) 括号内部的值为 标签元素,得到的结果是 jquery对象,一般是一个集合,加索引取到dom对象
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
$(document).ready(function(){
$("#show").click(function(){
$("#2,#3").show();
});
$('#submit').click(function(){
var input = $("#name").val();
$("#1 p").first().append(input);
var g = $("input[name='gender']:checked").val();
alert(g);
$("#1 p").first().next().append(g);
$("#2,#3").hide();
});
});
</script>
Python全栈开发之前端之 jquery
一、查找元素
1、选择器
1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
1.2层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div)
$(".outer~div")(.outer后面的所有div)
1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")
1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签
2 筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类,有的话返回true)
2.2 查找筛选器
$("div").children(".test")(只考虑子元素,而不考虑所有的后代) $("div").find(".test") (考虑所有的后代)
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents()(祖先元素集合) $(".test").parentUntil()
$("div").siblings() (同辈元素不包括自己)
二、操作元素
1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
2 CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框, outerHeight()包含边框, 两个都包含padding height()不包含边框
3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after() insertAfter()
replaceWith() remove() empty() clone()
4 事件
4.1
$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完,但是图片没加载)
4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托,这里需要重点注意下
Python全栈开发之前端之 jquery
一、查找元素
1、选择器
1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
1.2层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div)
$(".outer~div")(.outer后面的所有div)
1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")
1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签
2 筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类,有的话返回true)
2.2 查找筛选器
$("div").children(".test")(只考虑子元素,而不考虑所有的后代) $("div").find(".test") (考虑所有的后代)
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents()(祖先元素集合) $(".test").parentUntil()
$("div").siblings() (同辈元素不包括自己)
二、操作元素
1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
2 CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框, outerHeight()包含边框, 两个都包含padding height()不包含边框
3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after() insertAfter()
replaceWith() remove() empty() clone()
4 事件
4.1
$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完,但是图片没加载)
4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托,这里需要重点注意下
一、查找元素
1、选择器
1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class,p,div")
1.2层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div)
$(".outer~div")(.outer后面的所有div)
1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")
1.4 属性选择器 $('[id="div1"]') $('["alex="sb"][id]')
1.5 表单选择器 $("[type='text']") 简写成 $(":text") 注意只适用于input标签
2 筛选器
2.1 过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test") (检测li中的是否含有某个特定的类,有的话返回true)
2.2 查找筛选器
$("div").children(".test")(只考虑子元素,而不考虑所有的后代) $("div").find(".test") (考虑所有的后代)
$(".test").next() $(".test").nextAll() $(".test").nextUntil() (开区间)
$("div").prev() $("div").prevAll() $("div").prevUntil()
$(".test").parent() $(".test").parents()(祖先元素集合) $(".test").parentUntil()
$("div").siblings() (同辈元素不包括自己)
二、操作元素
1 属性操作
$("p").text() $("p").html() $(":checkbox").val()
$(".test").attr("alex") $(".test").attr("alex","sb")
$(".test").attr("checked","checked") $(":checkbox").removeAttr("checked")
$(".test").prop("checked",true)
$(".test").addClass("hide")
2 CSS操作
(样式) css("{color:'red',backgroud:'blue'}")
(位置) offset() position() scrollTop() scrollLeft()
(尺寸) innerHeight()不包含边框, outerHeight()包含边框, 两个都包含padding height()不包含边框
3 文档处理
内部插入 $("#c1").append("<b>hello</b>") $("p").appendTo("div")
prepend() prependTo()
外部插入 before() insertBefore() after() insertAfter()
replaceWith() remove() empty() clone()
4 事件
4.1
$(document).ready(function(){}) -----------> $(function(){}) 最好都加上这一句(所有文档执行完,但是图片没加载)
4.2
$("p").click(function(){})
$("p").bind("click",function(){})
$("ul").delegate("li","click",function(){}) // 事件委托,这里需要重点注意下
Jquery 简明介绍的更多相关文章
- Spark如何使用Akka实现进程、节点通信的简明介绍
<深入理解Spark:核心思想与源码分析>一书前言的内容请看链接<深入理解SPARK:核心思想与源码分析>一书正式出版上市 <深入理解Spark:核心思想与源码分析> ...
- Linq4j简明介绍
Linq4j简明介绍 开发JAVA一段时间,面临的一大问题就是集合操作,习惯了LINQ的简洁语法,对JAVA的集合操作实在是无甚好感,只能通过C系的循环实现筛选等操作,由于没有延迟执行特性,内存占用实 ...
- (二)Jquery Mobile介绍以及Jquery Mobile页面与对话框
Jquery Mobile介绍以及Jquery Mobile页面与对话框 一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地 ...
- python 全栈开发,Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)
js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...
- jQuery的介绍和选择器详解
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. jQuery 的介绍 引入 jQuery 的原因 在用 js 写代码时, ...
- 静态库(.a)与动态库(.so)的简明介绍
静态库(.a)与动态库(.so)的简明介绍 gcc有很多关于静态库,动态库的选项如-l,-L,-fPIC,-shared -Wl,-soname,看着很复杂容易混淆,其实静态库和动态库都是应需而生,只 ...
- jQuery 简单介绍
jQuery 简单介绍 jQuery的定义 jQuery是一个快速,小巧,功能丰富的JavaScript库.它通过易于使用的API在大量浏览器中运行,使得 HTML文档遍历和操作,事件处理,动画 ...
- 关于JQuery简单介绍
jQuery是一个兼容多浏览器的javascript库,核心理念是写得更少,做得更多.如今,jQuery已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用 ...
- jQuery.extend()介绍
},{name:"Jerry",sex:"Boy"}) 得到的Result结果是: result={name:"Jerry",age:21, ...
随机推荐
- makefile--嵌套执行(四)
原创博文,转载请标明出处--周学伟http://www.cnblogs.com/zxouxuewei/ 在大一些的项目里面,所有源代码不会只放在同一个目录,一般各个功能模块的源代码都是分开的,各自放在 ...
- mybatis由浅入深day01_6SqlMapConfig.xml(6.2settings全局参数配置_6.3typeAliases(类型别名)_6.4typeHandlers(类型处理器)_6.5mappers(映射配置))
6 SqlMapConfig.xml mybatis的全局配置文件SqlMapConfig.xml,配置内容和顺序如下: properties(属性) settings(全局配置参数) typeAli ...
- HTML&CSS精选笔记_CSS高级技巧
CSS高级技巧 CSS精灵技术 需求分析 CSS精灵是一种处理网页背景图像的方式.它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发 ...
- Objective-C语法之KVC使用
转自:http://www.cnblogs.com/stoic/archive/2012/07/20/2601315.html 除了一般的赋值和取值的方法,我们还可以用Key-Value-Coding ...
- Java架构学习 转(Spring+SpringMVC+MyBatis+easyUI)
Spring+SpringMVC+MyBatis+easyUI : http://www.cnblogs.com/han-1034683568/p/6730869.html
- oracle常用管理命令
启动数据库和监听 lsnrctl start sqlplus /nolog conn sys/as sysdba startup 查看当前的实例名 show parameter instance_n ...
- js里面正则表示满足多个条件的写法
实例,满足条件里面必须包含数字,字母和下划线组成 代码如下: var reg = /^([a-z]+\d+\_+)|([a-z]+\_+\d+)|(\_+[a-z]+\d+)|(\_+\d+[a-z] ...
- 安装postgresql之后为什么找不到postgresql service
没有正常启动 postgresql service.可以 在运行里面 输入 services.msc 找到 postgresql 的服务.启动他.或者也可以用postgres 自带的 工具pg_ctl ...
- 【PHP】数字补零的两种方法
在php中有两个函数,能够实现数字补零, str_pad() sprintf() 函数1 : str_pad 顾名思义这个函数是针对字符串来说的这个可以对指定的字符串填补任何其它的字符串 例如:str ...
- 日记整理---->2016-11-23
这里放一些jquery的学习知识.可能从一开始就是我一个人单枪匹马,来年不求并肩作战,只愿所向披靡. jquery的学习一 jquery关于ajax的一些学习博客 ajax方法的介绍:https:// ...