DDR爱好者之家

JQuery学习总结【一】
站长资源 2024/11/28 佚名
65 1538
DDR爱好者之家 Design By 杰米

JQuery学习总结【一】

一：JQuery

1 JQuery知识

*：就是让我们学会调用JQ插件，其实内部就是对JS的封装。

*：jquery里面有三个文件，

JQuery学习总结【一】

第2个和第3个其实里面的内容是一样的，只是第三个对其进行了压缩，使浏览器对其的访问时间变短。

我们在使用的时候将Jquery-1.4.2.js和jquery.1.4.2-vsdoc,js放在一起，其实vsdoc.js是对于前面的解释说明，它是让我们在编写代码的时候可以点操作出来。

*:练习《点击按钮弹出对话框的内容》 《点击网页里面的文字使文字一行一行消失》(“$”这个其实是个函数)

<head> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.4.2.js">


2 JQuery里面的Ready 《在网页刚开始就弹出内容》


$(dounction).ready(function(){alert(“加载完毕”);})


其实还可以这样子写


$(function(){alert(“加载完毕”);});


<解析：”$”这个函数将匿名函数function()注册为Ready执行。>


3 jquery内置函数


  .map(array,fn)对数组中array中的每一个元素调用fn函数进行处理，fn函数将处理返回，最后得到一个新的数组。.map(array,fn)对数组中array中的每一个元素调用fn函数进行处理，fn函数将处理返回，最后得到一个新的数组。map不能处理Dictionary风格的数组。要用下面的$.each来处理。


  $.each(array.fn)对数组arr每个元素调用fn函数进行处理，没有返回值。





var arr=[3,5,7]; 
Var arr2=$map.(arr,function(item){return item*2}) 函数式编程。 
Var arr={“tom”;”檀木”,”xiaozhang”;”小张”} 
$.each(arr,function(key,value){alert(key+”=”+value);});






4 JQuery对象，Dom对象


<dom就是浏览器的一些标记，比如层，按钮，标签等，数组是jq的对象。>


Jquery对象就是通过jquery包装Dom对象后产生。而且jquery对象只能调用jquery对象封装的方法。不能调用Dom对象的方法。


$(function(){$(“#id”).css(“background”,”red”)});


上面的代码是复制，就是将背景色设置为红色，若.css中的属性为一个则为得到值，2个即为设置值。


5 jquery选择器


*id选择器


$(“#div”).html();


*TabName选择器<标签选择器>


$(“div”).click(function（）｛alert(“你好我是p”);｝);


这里就是将网页中所有的div标签都选择了，都向其添加了click事件。


* css选择器


  同时选择多个样式，就是给制定样式的添加。


$(“div”).click(function(){alert(“这是信息”)});


6 多条件选择器/层次选择器


JQuery学习总结【一】


7 jquery的迭代


  就是里面的错误程序不会给提示出错，我们自己要添加if/elae语句进行判断。


JQuery学习总结【一】


8 jquery的节点遍历


就是运用next（）,nextall()方法来进行遍历的。就好像在数组那里的遍历是一样的。  这里只是得到它的下一个元素的值。


Siblings()：获取所有元素的同辈元素(兄弟节点)。


*:jquery的链式编程





$("div").click(function(){
$(this).css("background","red").siblings("div").css("background","white")
});





就是很容易的通过点操作符来操作。


//这里是链式操作,减少了使用if/else等操作。改变了编程风格。





<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <script src="/UploadFiles/2021-04-02/jquery-1.4.2-vsdoc.js">


9 ：基本的过滤器


JQuery学习总结【一】


这里可以将其写在一起，比如选择器和过滤器，这样子就会很强大。


不仅可以使用选择器进行绝对定位，还可以进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素。


案例：


JQuery学习总结【一】


（相对定位）


JQuery学习总结【一】


   ：这里的元素就是在定位#tables tr 下的td的定位


10 属性过滤器


JQuery学习总结【一】


Eg：





<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="/UploadFiles/2021-04-02/jquery-1.4.2.js">


11 元素的each <通过一些过滤器和选择器来遍历each一些元素。>





<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <script src="/UploadFiles/2021-04-02/jquery-1.4.2.js">


JQuery学习总结【一】


以上就是本文的全部内容，希望对大家有所帮助，下篇文章继续介绍JQuery基本知识--JQuery学习总结【二】，有兴趣的朋友可以看下。谢谢对的支持！


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米