当前位置: 澳门新濠3559 > 服务器运维 > 正文

可以对元素执行某些操作,有点类似人的别名

时间:2019-12-26 07:51来源:服务器运维
jQuery学习笔记: jQuery学习 1、基本语法: $ $:定义jQueryselector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例:$------隐藏当前元素 $-------隐藏所有的p元素 $-----隐藏id=ID的元素

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

JS越来越像一种面向对象的编程语言,它本身没有类类型,不过它用function模拟类类型,所以在学习JS时,一定不要把function当做对象或实例,而是当作类类型,类似JAVA中的Class,这样就不会混淆了概念。

jQuery 简单归纳总结

jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。

基础语法是:$(selector).action()
+美元符号定义 jQuery
+选择符(selector)“查询”和“查找” HTML 元素
+jQuery 的 action() 执行对元素的操作
示例:
$("p").hide()--隐藏所有段落
$(this).hide()--隐藏当前元素

jQuery选择器:
元素选择器:
$("p")--选取

元素
$("p.intro")--选取所有class=“intro”的

元素
$("p#intro")--选取所有id=“ontro”的

元素

属性选择器:
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

CSS选择器:
$("p").css("background-color","red");

jQuery 名称冲突:
jQuery使用$符号作为jQuery的简称方式。
某些其他JavaScript库(比如Prototype)也是用同样的符号。
那么此时,jQuery使用noConflict()的方法来解决此问题。
Var jq=jQuery.noConflict(); //帮助你使用自己的名称来使用jQuery

jQuery是为事件处理专门设计的。
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});

jQuery hide()和show()
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed隐藏动作所执行速度,它可以取值:“slow”.“fast”和毫秒值
callback隐藏后回调函数

可以对元素执行某些操作,有点类似人的别名。jQuery toggle():显示被隐藏的元素,隐藏已显示的元素

jQuery效果:淡入淡出
淡入:$(selector).fadeIn(speed,callback)
淡出:$(selector).fadeOut(speed,callback)
淡入淡出切换:$(selector).fadeToggle(speed,callback)
渐变为给定不透明度:$(selector).fadeTo(speed,opacity,callback)
speed:动作执行速度。它可以取值:“slow”.“fast”和毫秒值
opacity:参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

jQuery滑动效果
向下滑动:$(selector).slideDown(speed,callback);
向上滑动:$(selector).slideUp(speed,callback);
上下切换:$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

jQuery 动画 animate()
语法:$(selector).animate({params},speed,callback);
patams:必须参数,定义形成的动画css属性
speed :可选参数,规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
注:默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置
进行操作,记得首先把元素的 CSS position 属性设置为 relative、fixed 或
absolute。

jQuery:stop()--停止函数,动画或效果。
语法:$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,
即仅停止活动的动画,允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

Chaining可以把动作方法链接起来:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);

jQuery拥有可操作HTMML元素的属性的强大方法。
三个简单实用的用于 DOM 操作的 jQuery 方法:
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
attr() - 获取链接中href属性的值
ps:括号无值为获取,有值为设置

jQuery-添加元素
append() - 在被选元素的结尾插入内容(内部)
prepend() - 在被选元素的开头插入内容(内部)
after() - 在被选元素之后插入内容(外部)
before() - 在被选元素之前插入内容(外部)

jQuery-删除元素
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素

jQuery-获取并设置CSS类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性,可设置多个css属性,如下:
css({"propertyname":"value","propertyname":"value",...});

jQuery-尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。
innerWidth() 方法返回元素的宽度(包括内边距)。
innerHeight() 方法返回元素的高度(包括内边距)。
outerWidth() 方法返回元素的宽度(包括内边距和边框)。
outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery-遍历
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
parent() 方法返回被选元素的直接父元素。
parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。
可以使用可选参数来过滤对祖先元素的搜索。
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
例:
$(document).ready(function(){
$("span").parents("ul");
});
向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
children()方法返回被选元素的所有直接子元素。可以使用可选参数来过滤对子元素的搜索。
find()方法返回被选元素的后代元素,一路向下直到最后一个后代。
$(document).ready(function(){
$("div").children("p.1");
});
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
siblings()方法返回被选元素的所有同胞元素。
next()方法返回被选元素的下一个同胞元素。
nextAll()方法返回被选元素的所有跟随的同胞元素。
nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev()
prevAll()
prevUntil()

jQuery 遍历-过滤
first() 方法返回被选元素的首个元素。
$(document).ready(function(){
$("div p").first();
});
last() 方法返回被选元素的最后一个元素。
eq() 方法返回被选元素中带有指定索引号的元素。
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,
匹配的元素会被返回。
not() 方法返回不匹配标准的所有元素。与 filter() 相反。

jQuery - AJAX
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。
使用 AJAX 的应用程序案例:谷歌地图、腾讯微博、优酷视频、人人网等等。

jQuery - AJAX load() 方法(简单但强大的AJAX方法),
从服务器加载数据,并把返回的数据放入被选的元素中。
语法: $(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
可选的 callback 参数是 load() 方法完成后所执行的函数名称。
实例:
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});

jQuery $.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
语法:
$.get(URL,callback);
实例:
$(document).ready(function(){
$("button").click(function(){
$.get("/example/jquery/demo_test.asp",function(data,status){
alert("数据:" + data + "n状态:" + status);
});
});
});

jQuery $.post() 方法
$.post() 方法通过HTTP POST 请求从服务器上请求数据
语法:
$post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
实例:
$("button").click(function(){
$.post("demo_test_post.asp",
{
name:"Donald Duck",
city:"Duckburg"
},
function(data,status){
alert("Data: " + data + "nStatus: " + status);
});
});

简单归纳总结 jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。 基础语法是:$(selector).action() 美元符号定义 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 请求的所有键/值对选项

...

编辑:服务器运维 本文来源:可以对元素执行某些操作,有点类似人的别名

关键词:

  • 上一篇:没有了
  • 下一篇:没有了