jquery第一阶段学习笔记

function采用new来实例化,而this就是实例的一个引用,所谓引用,有点类似人的别名,无论别名有多少,都指的是同一个人,所以this指的是那个用new创建的实例,this是运行时确定的,所以同一个this可能指向不同的对象。

讲到this就不得不谈JS的类型,JS只有几种类型,分别是string,number,function,object和boolen。其中最灵活的是object类。

例如o={};

 代码如下 复制代码

o=[];

a=function(){};

o=new a();

这三种情况,o都是object类,甚至NULL也是object类,不过NULL是空,没有对象。如果是下面这种情况,this指向window:

 代码如下 复制代码

a=function(){

alert(this);

}

this的另一种用法是指向function类型,例如

 代码如下 复制代码

a=function(){

}

a.b=function(){

alert(typeof this)

}

这种写法有点特殊,不过他有特殊的用途,结合apply,call可以写成,this.call或this.apply的形式,此时会调用this指向的函数,可以实现一些特殊的效果。

补充一些内容

1、基本语法:
   $(selector).action()
   $:定义jQuery
   selector:选择符,查询和查找HTML元素
   action():对元素执行的操作
   实例:
   $(this).hide()------隐藏当前元素
   $("p"),hide()-------隐藏所有的p元素
   $("#ID").hide()-----隐藏id=ID的元素
   $("p.Class")--------隐藏class=Class的P

   $(document).ready(function(){-----});
   这样用为了防止文档未加载就运行jQuery代码。
2、选择器通过属性选择元素
   $("[href]") 选择所有具有href属性的元素
   $("[href='AA']") 选择属性href=‘AA’的元素
   $("[href!='AA']")选择所有href!=‘AA’的元素
   $("[href$='.jpg']")选取所有href值以.jpg结尾的元素
3、选择器选择Css属性
   $("p").css("background-color","red"); 修改所有的p元素的背景颜色为红色
   $("div#ID .Class") id=ID的div元素中所有class=Class的元素
4、名称冲突
   var jQMy = jQuery.noConflict() yong jQMy代替$
5、常用事件
   $(document).ready(function) 文档的就绪事件
   $(selector).click(function) 被选元素的点击事件
   $(selector).dblclick(function) 被选元素的双击事件
   $(selector).focus(function)    被选元素获得焦点事件
   $(selector).mouseover(function) 被选元素鼠标悬停事件
6、jQuery效果
   $(selector).hide() 隐藏被选元素
   $(selector).show() 显示被选元素
   $(selector).toggle() 切换(在隐藏与显示之间)被选元素
   $(selector).slideDown() 向下滑动(显示)被选元素
   $(selector).slideUp() 向上滑动(隐藏)被选元素
   $(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
   $(selector).fadeIn() 淡入被选元素
   $(selector).fadeOut() 淡出被选元素
   $(selector).fadeTo() 把被选元素淡出为给定的不透明度
   $(selector).animate() 对被选元素执行自定义动画
   参数:"slow", "fast", "normal" 或毫秒
   回调函数:callback
   $("p").hide(1000,function(){
   alert("The paragraph is now hidden");
   });
7、jQuery的HTML操作
   $(selector).html(content) 改变被选元素的(内部)HTML
   $(selector).append(content) 向被选元素的(内部)HTML 追加内容
   $(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
   $(selector).after(content) 在被选元素之后添加 HTML
   $(selector).before(content) 在被选元素之前添加 HTML
8、jQuery的CSS操作
   $(selector).css(name,value) 为匹配元素设置样式属性的值
   $(selector).css({properties}) 为匹配元素设置多个样式属性
   $(selector).css(name) 获得第一个匹配元素的样式属性值
   $(selector).height(value) 设置匹配元素的高度
   $(selector).width(value) 设置匹配元素的宽度
9、jQuery AJAX 请求
   $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
   $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
   $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
   $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
   $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
   $.getScript(url,callback) 加载并执行远程的 JavaScript 文件
   (selector) jQuery 元素选择器语法
   (url) 被加载的数据的 URL(地址)
   (data) 发送到服务器的数据的键/值对象
   (callback) 当数据被加载时,所执行的函数
   (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
   (options) 完整 AJAX 请求的所有键/值对选项

时间: 2024-10-27 18:35:59

jquery第一阶段学习笔记的相关文章

Vue.js第一天学习笔记(数据的双向绑定、常用指令)_javascript技巧

数据的双向绑定(ES6写法)  效果: 没有改变 input 框里面的值时: 将input 框里面的值清空时: 重新给  input 框输入  豆豆 后页面中  span  里绑定{{testData.name}}的值随着 input 框值的变化而变化. 在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定.并且v-model指令只能用于:<input>.<select>.<textarea>这三种标签. <template> <di

jquery中ajax学习笔记4_jquery

缓存问题: 何谓缓存问题?即当浏览器的输入内容相同,即请求的URL相同,这样浏览器就会去读缓存,两次的内容一样,就不会和服务器端进行交互. 解决方式:在请求的url中加上时间戳. 通过我的测试,IE.360两次用户名输入一致时不会和服务器端交互,firefox即使两次用户名输入的一样,仍然会和服务器端交互. 即:firefox的中服务器端返回的temp值会每次加1,IE.360就不会改变.故加上时间戳在这三种浏览器中都不会再有缓存问题. 修改的代码: AJAXServer.java 缓存问题 复

jquery中ajax学习笔记一_jquery

AJAX简单介绍: AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),是指一种创建交互式网页应用的网页开发技术.通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象,您JavaScript 可在不重载页面的情况与 Web 服务器交换数据. jQuery是一种javascript框架,是对javascript的一种轻量级的封装,容易理解. A

JQuery实现AJAX学习笔记(1/3)

 JQuery就是一个经过封装的Javascript类库,它有自己的语法规范,下面我会讲一下在JQuery下用3中方法实现AJAX.还是先从例子入手吧! 第一种方法$.Post(url,data,callback, type); 首先新建一个html页,页面布局和上一节的差不多 代码如下:  代码如下 复制代码   <table style="background-color:lightgreen; margin-top:230px; margin-left:300px">

分享jQuery插件的学习笔记_jquery

插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一. 插件概述 插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,主要大致可以分为:UI 类.表单及验

jquery中ajax学习笔记3_jquery

摘要: ajax学习1中介绍了使用jquery封装的ajax来接收服务器端的文本数据以及使用XMLHttpReques对象来接收服务器端的文本数据 ajax学习2中介绍了使用XMLHttpReques来接收服务器的端XML数据,本节主要介绍使用jqery封装的ajax使用XML格式接收服务器端的数据. 由于很多知识都已经做了详细介绍,本节只介绍需要修改的代码,使用jqery封装的ajax使用XML格式接收服务器端的数据,web.xml.后台的servet都不用改, 只是ajax.html中调用的

jQuery Mobile插件学习笔记

touch事件 jquery mobile提供了最基本的触摸事件:touch事件 tap: 快速触摸屏幕并离开,类似于一次完整的点击事件 taphold: 触摸屏幕并保持一段时间 swipe: 在1秒内水平移动30px屏幕像素以上时触发 swipeleft: 向左侧滑动 swiperight: 向右侧滑动方向改变事件 orientationchange事件函数当移动设备方向发生改变时触发. 在事件回调函数内的第二个参数返回一个用于识别当前方向的参数,该参数只会返回两种值:portrait(纵向)

jquery动画效果学习笔记(8种效果)_jquery

1.元素的显示和隐藏 display:none; 隐藏 display:block; 显示 简单显示和隐藏方法 a) show() 显示 b) hide() 隐藏 c) toggle() 开关,显示则隐藏,隐藏则显示 <script type="text/javascript"> function f1(){ //隐藏 $("div").hide();//display:none //document.getElementById('id').style

jQuery Ajax示例学习笔记

使用 jQuery 将使 Ajax 变得及其简单.jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂. Ajax 最常见的用法就是把一块 HTML 代码加载到页面的某个区域中去.为此,只需简单地选择所需的元素,然后使用 load() 函数即可.下面是一个用于更新统计信息的示例:  代码如下 复制代码 $('#stats').load('stats.html'); 通常,我们只需简单地把一些参数传递给服务器中的某个页面.正如您所预料的,使用 jQuery 实现这一操