JQuery:
<1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team。
<2>jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
<3>它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器
<4>jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments、events、实现动画效果,并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
二 什么是jQuery对象?
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();
$("#test").html()
//意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法 // 这段代码等同于用DOM实现代码: document.getElementById(" test ").innerHTML; //虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 //约定:如果获取的是 jQuery 对象, 那么要在变量前面加上$. var $variable = jQuery 对象
var variable = DOM 对象 $variable[0]:jquery对象转为dom对象 $("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法:$(selector).action()
三 寻找元素(选择器和筛选器)
3.1 选择器
3.1.1 基本选择器
1
|
$( "*" ) $( "#id" ) $( ".class" ) $( "element" ) $( ".class,p,div" ) |
3.1.2 层级选择器
1
|
$( ".outer div" ) $( ".outer>div" ) $( ".outer+div" ) $( ".outer~div" ) |
3.1.3 基本筛选器
1
|
$( "li:first" ) $( "li:eq(2)" ) $( "li:even" ) $( "li:gt(1)" ) |
3.1.4 属性选择器
1
|
$( '[id="div1"]' ) $( '["alex="sb"][id]' ) |
3.1.5 表单选择器
1
|
$( "[type='text']" )----->$( ":text" ) 注意只适用于input标签 : $( "input:checked" ) |
实例之左侧菜单
实例之tab切换
3.2 筛选器
3.2.1 过滤筛选器
1
|
$( "li" ).eq(2) $( "li" ).first() $( "ul li" ).hasclass( "test" ) |
3.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()
四 操作元素(属性,css,文档处理)
4.1 属性操作
--------------------------属性
$("").attr();
$("").removeAttr();
$("").prop();
$("").removeProp();
--------------------------CSS类
$("").addClass(class|fn)
$("").removeClass([class|fn])
--------------------------HTML代码/文本/值
$("").html([val|fn])
$("").text([val|fn])
$("").val([val|fn|arr])
---------------------------
$("").css("color","red")
注意:
实例之全反选
实例之模态对话框
4.2 文档处理
//创建一个标签对象
$("<p>") //内部插入 $("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo"); //外部插入 $("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo"); //替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>"); //删除 $("").empty()
$("").remove([expr]) //复制 $("").clone([Even[,deepEven]])
实例之复制样式条
4.3 css操作
CSS
$("").css(name|pro|[,val|fn])
位置
$("").offset([coordinates])
$("").position()
$("").scrollTop([val])
$("").scrollLeft([val])
尺寸
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
实例返回顶部
五 事件
页面载入
ready(fn) //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){}) -----------> $(function(){}) 事件处理
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。 // .on的selector参数是筛选出调用.on方法的dom元素的指定子元素,如:
// $('ul').on('click', 'li', function(){console.log('click');})就是筛选出ul下的li给其绑定
// click事件; [selector]参数的好处:
好处在于.on方法为动态添加的元素也能绑上指定事件;如: //$('ul li').on('click', function(){console.log('click');})的绑定方式和
//$('ul li').bind('click', function(){console.log('click');})一样;我通过js给ul添加了一个
//li:$('ul').append('<li>js new li<li>');这个新加的li是不会被绑上click事件的 //但是用$('ul').on('click', 'li', function(){console.log('click');}方式绑定,然后动态添加
//li:$('ul').append('<li>js new li<li>');这个新生成的li被绑上了click事件 [data]参数的调用:
function myHandler(event) {
alert(event.data.foo);
}
$("li").on("click", {foo: "bar"}, myHandler)
实例之面板拖动
实例之放大镜
六 动画效果
显示隐藏
滑动
淡入淡出
回调函数
七 扩展方法 (插件机制)
一 用JQuery写插件时,最核心的方两个方法
<script> $.extend(object) //为JQuery 添加一个静态方法。
$.fn.extend(object) //为JQuery实例添加一个方法。 jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
console.log($.min(3,4)); //-----------------------------------------------------------------------
$.fn.extend({
"print":function(){
for (var i=0;i<this.length;i++){
console.log($(this)[i].innerHTML)
} }
}); $("p").print();
</script>
二 定义作用域
定义一个JQuery插件,首先要把这个插件的代码放在一个不受外界干扰的地方。如果用专业些的话来说就是要为这个插件定义私有作用域。外部的代码不能直接访问插件内部的代码。插件内部的代码不污染全局变量。在一定的作用上解耦了插件与运行环境的依赖。
(function(a,b){return a+b})(3,5) (function ($) { })(jQuery);
//相当于
var fn = function ($) { };
fn(jQuery);
三 默认参数
定义了jQuery插件之后,如果希望某些参数具有默认值,那么可以以这种方式来指定。
八 经典实例练习
实例之注册验证
JQuery:的更多相关文章
- 抛弃jQuery:DOM API之选择元素
原文链接:http://blog.garstasio.com/you-dont-need-jquery/selectors/ 我的Blog:http://cabbit.me/you-dont-need ...
- 抛弃jQuery:Why?
原文链接:http://blog.garstasio.com/you-dont-need-jquery/ 我的Blog:http://cabbit.me/you-dont-need-jquery/wh ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery:获取浏览器中的分辨率
JQuery: <script type="text/javascript"> $(document).ready(function(){ alert($(window ...
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- JQuery:通过noConflict()方法同时使用jQuery 和其他框架
jQuery - noConflict()方法 一.如何在页面上同时使用 jQuery 和其他框架?jQuery 和其他 JavaScript 框架正如您已经了解到的,jQuery 使用 $ 符号作为 ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jquery :操作iframe
原文 jquery :操作iframe 1. 内容里有两个ifame <iframe id="leftiframe"...</iframe> <iframe ...
- jquery:获取checked复选框的问题
jquery:获取checked复选框的问题 功能描述:要完成一个全选的功能,但总是获取不到复选框的被选中的个数,究其原因,是Jquery中length和checked使用不当所造成的. // 获取所 ...
- jQuery:$(document).ready()用法
jQuery:$(document).ready()用法 $(document).ready() 方法允许我们在文档完全加载完后执行函数;
随机推荐
- JDOJ3007 铺地板I
JDOJ3007 铺地板I https://neooj.com/oldoj/problem.php?id=3007 题目描述 有一个大小是 2 x N(1 <= N <= 105)的网格, ...
- nextjs作为koa中间件的使用
react客户端渲染的缺点:首屏速度慢,对SEO不友好 浏览器请求步骤 客户端跳转 1. ...
- JAVA 运行springboot jar包设置classpath
Java 命令行提供了如何扩展bootStrap 级别class的简单方法. -Xbootclasspath: 完全取代基本核心的Java class 搜索路径.不常用,否则要重新写所有Java 核心 ...
- Java面试- JVM 内存模型讲解
经常有人会有这么一个疑惑,难道 Java 开发就一定要懂得 JVM 的原理吗?我不懂 JVM ,但我照样可以开发.确实,但如果懂得了 JVM ,可以让你在技术的这条路上走的更远一些. JVM 的重要性 ...
- Spring源码系列 — 注解原理
前言 前文中主要介绍了Spring中处理BeanDefinition的扩展点,其中着重介绍BeanDefinitionParser方式的扩展.本篇文章承接该内容,详解Spring中如何利用BeanDe ...
- 【10】Nginx:后面有无 / 的区别
写在前面的话 在 nginx 中,我们很多时候都有一个疑问,在 proxy_pass 或者 root 或者 location 后面需不需要加上 /,加和不加有啥区别. root / alias 后面 ...
- Powershell ExecutionPolicy 执行策略
简单说明 powershell对于脚本的执行有着严格的安全限制 Get-ExecutionPolicy -List #查看当前的执行策略 Set-ExecutionPolicy -Scope Curr ...
- Attract队作品简介
湖南师范大学 Attract队 荣获“航天宏图杯”PIE遥感图像处理软件二次开发大赛二等奖 作品名称:基于深度学习的遥感影像分类系统-以长沙市居住区分类为例 团队简介:周亮(指导老师).张慧(组长) ...
- Python【day 13】内置函数01
1.python3.6.2 一共有 68个内置函数2.分成6个大类 1.反射相关-4个 2.面向对象相关-9个 3.作用域相关--2个 1.globlas() #注意:最后是s,复数形式 查看全局作用 ...
- 链表逆序,java实现
package com.cskaoyan.linkedlist; //反转数组 public class LinkedListDemo2 { public static Node reverse(No ...