jquery知识总结(1)

大城市里の小女人 提交于 2019-11-28 13:24:52

原文: http://blog.gqylpy.com/gqy/494

置顶:来自一名75后老程序员的武林秘籍——必读(博主推荐)


来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/

你好,我是一名极客!一个 75 后的老工程师!

我将花两分钟,表述清楚我让你读这段文字的目的!

如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍!

没错,我就是这个老者!

干研发 20 多年了!我也年轻过,奋斗过!我会画原理图,会画 PCB,会模拟,会数字!玩过 PLC,玩过单片机,会用汇编,会用 C!玩过 ARM,比如 PLC,STM32,和时下正在起飞的 NXP RT1052!搞过 DSP,比如 TMS320F28335!搞过 FPGA,不管 Xilinx 还是 Altera,也不管是 Verilog 还是 VHDL,或者直接画数字电路图!我懂嵌入式系统,比如 uCOS 和 Linux!我懂开源的硬件,比如 Arduino 和树莓派!我也搞软件,学了一堆上位机的语言C#,JAVA,Python,Kotlin,Swift!会写爬虫工具,又自学写APP,不管Android 还是 IOS!

可是这一切有什么用呢?土鸡瓦狗!不值一提!干技术的永远就是最苦逼的那个人!

我相信看到这里的你,应该是个 IT 圈的人!或许是个学生,在学习某个技能!或者是个初入职场的年轻人,在啃某个技术!或者是个工程师,被项目困住,想找个资料快速突破阻碍!反正不管怎么样,你们都不会是泛泛之辈,不可能轻易交出智商税!

所以我把这份资料放进我的收费资源里,以证明接下去我要跟你讲的这本武功秘籍是可以真真实实的帮你赚到钱的!

我不知道叫它什么好,我把它写的像武林秘籍!所以我姑且叫它《武林秘籍》或者叫《赚钱秘籍》!

《武林秘籍》里封装了一个本人近期创造的一个可以一劳永逸的赚钱方法!你可以理解为躺着赚钱,或者挂机赚钱!请你放心,不是让你去违法!

我是一个IT男,从来不忽悠别人,这是我做人的原则。若此举能帮助你付起房子首付与月供,减轻一些目前高房价的压力,何乐而不为呢!

我提取里边几个要点:

  1. 将你手里有的资源按照说明书一步一步完成所有动作就可以躺着赚钱。
  2. 你不可能不劳而获,但是用这个方法确实是可以一劳永逸!
  3. 我用业余时间操作这个项目三个月,现在每天稳定收入300+。
  4. 里边会告诉你哪些是资源,怎么源源不断的获取资源。
  5. 里边会告诉你怎么获取爆炸的流量。
  6. 里边会告诉你很多黑技能(不是干坏事)。
  7. 总之,里边字字如金,有些东西我不告诉你可能这辈子都不会知道!

交了这波智商税,你的能力会爆涨,我说的不是你的专业能力,而是在这个社会生存的基础能力!

以上所有的东西可以规为武功的招式,但如果你想短期就实现目标,我还在说明书的最后留下了一些现成资源的下载链接,包括一些稀缺的资源,保证物有所值。这部分内容可以规为内功,继不继承由你自已决定!

好了,最后跟所有的老者不一样的是:这个老人要问你收取一点点小费,才会把无比珍贵的秘籍交到你手中!

以下是付款链接,付款后你将获取《武林秘籍》的访问密码。随后你将解锁另外一个谋生技能,在工作挣着死工资的同时,该技能也能同时帮你赚另一份钱,终身受用!

http://www.gqylpy.com/get_wlmj_pwd

能在此遇见是我们的缘分,我愿意帮助你,祝你取得成功!

传说中的武林秘籍:http://blog.gqylpy.com/gqy/401/

一、jQuery 的介绍
jQuery 是目前使用最广泛的 javascript 函数库。据统计,全世 界排名前 100 万的网站,有 46%使用 jQuery,远远超过其他库。微软 公司甚至把 jQuery 作为他们的官方库。 jQuery 的版本分为 1.x 系列和 2.x、3.x 系列,1.x 系列兼容低版 本的浏览器,2.x、3.x 系列放弃支持低版本浏览器,目前使用最多 的是 1.x 系列的。 jquery 是一个函数库,一个 js 文件,页面用 script 标签引入这 个 js 文件就可以使用。


jquery 的口号和愿望 Write Less, Do More(写得少,做得多)
1、http://jquery.com/ 官方网站
2、https://code.jquery.com/ 版本下载
二、jQuery 入口函数
将获取元素的语句写到页面头部,会因为元素还没有加载而出错, jquery 提供了 ready 方法解决这个问题,它的速度比原生的window.onload 更快。
 <script type="text/javascript">   $(document).ready(function(){    ...... });    </script> 

可以简写为:

<script type="text/javascript"> $(function(){ ...... }); </script> 

三、jQuery 选择器
jquery的选择器有很多很多种比如 id选择器 class选择器 标签选择器 属性选择器 层级选择器 子代选择器 后代选择器 筛选选择器 表单选择器 常用的有以下几种

$(document) //选择整个文档对象
$(‘li’) //选择所有的 li 元素
$(’#myId’) //选择 id 为 myId 的网页元素
$(’.myClass’) // 选择 class 为 myClass 的元素
$(‘input[name=first]’) // 选择 name 属性等于 first 的 input 元素
$(’#ul1 li span’) //选择 id 为为 ul1 元素下的所有 li 下的 span 元素
对选择集进行修饰过滤(类似 CSS 伪类)
$(’#ul1 li:first’) //选择 id 为 ul1 元素下的第一个 li
$(’#ul1 li:odd’) //选择 id 为 ul1 元素下的 li 的奇数行
$(’#ul1 li:eq(2)’) //选择 id 为 ul1 元素下的第 3 个 li
$(’#ul1 li:gt(2)’) // 选择 id 为 ul1 元素下的前三个之后的 li
$(’#myForm :input’) // 选择表单中的 input 元素
$(‘div:visible’) //选择可见的 div 元素
对选择集进行函数过滤
$(‘div’).has(‘p’); // 选择包含 p 元素的 div 元素
$(‘div’).not(’.myClass’); //选择 class 不等于 myClass 的 div 元素 $(‘div’).filter(’.myClass’); //选择 class 等于 myClass 的 div 元素
$(‘div’).first(); //选择第 1 个 div 元素
$(‘div’).eq(5); //选择第 6 个 div 元素
jquery 用法思想一 选择某个网页元素,然后对它进行某种操作 jquery 选择器 jquery 选择器可以快速地选择元素,选择规则和 css 样式相同,
使用 length 属性判断是否选择成功。
四、jQuery 样式操作
jquery 用法思想二 同一个函数完成取值和赋值
操作行间样式
// 获取 div 的样式
$(“div”).css(“width”);
$(“div”).css(“color”);
//设置 div 的样式
$(“div”).css(“width”,“30px”);
$(“div”).css(“height”,“30px”);
$(“div”).css({fontSize:“30px”,color:“red”});
特别注意
选择器获取的多个元素,获取信息获取的是第一个,比如:
$(“div”).css(“width”),获取的是第一个 div 的 width。
操作样式类名
$("#div1").addClass(“divClass2”) //为 id 为 div1 的对象追加样式 divClass2 $("#div1").removeClass(“divClass”) //移除 id 为 div1 的对象的 class 名为 divClass 的样式 $("#div1").removeClass(“divClass divClass2”) //移除多个样式 $("#div1").toggleClass(“anotherClass”) //重复切换 anotherClass 样式
五、jQuery 属性操作
1. html() 取出或设置 html 内容


2. text() 取出或设置 text 内容、

// 取出文本内容
var $htm = $(’#div1’).text();
// 设置文本内容
$(’#div1’).text('<span>添加文字</span>');

// 取出图片的地址
var $src = $(’#img1’).attr(‘src’);
// 设置图片的地址和 alt 属性
$(’#img1’).attr({ src: “test.jpg”, alt: “Test Image” });
六、绑定 click 事件
$(’#btn1’).click(function(){
// 内部的 this 指的是原生对象
// 使用 jquery 对象用 $(this)
})
七、jQuery 的特效效果及链式调用
//fadeIn() 淡入
$btn.click(function(){
$(’#div1’).fadeIn(1000,‘swing’,function(){
alert(‘done!’);
});
});
fadeOut() 淡出
fadeToggle() 切换淡入淡出
hide() 隐藏元素
show() 显示元素
toggle() 依次展示或隐藏某个元素
slideDown() 向下展开
slideUp() 向上卷起
slideToggle() 依次展开或卷起某个元素
jquery 对象的方法会在执行完后返回这个 jquery 对象,所有 jquery 对象的方 法可以连起来写:
$(’#div1’) // id 为 div1 的元素
.children(‘ul’) //该元素下面的 ul 子元素
.slideDown(‘fast’) //高度从零变到实际高度来显示 ul 元素
.parent() //跳到 ul 的父元素,也就是 id 为 div1 的元素
.siblings() //跳到 div1 元素平级的所有兄弟元素
.children(‘ul’) //这些兄弟元素中的 ul 子元素
.slideUp(‘fast’); //高度实际高度变换到零来隐藏 ul 元素
八、jQuery 动画
通过 animate 方法可以设置元素某属性值上的动画,可以设置一个或多个属性 值,动画执行完成后会执行一个函数。

   $('#div1').animate({          width:300,           height:300 },1000,swing,function(){           alert('done!'); }); 

参数可以写成数字表达式:

$('#div1').animate({  width:'+=100',  height:300  },1000,swing,function(){   alert('done!');    }); 

原文: http://blog.gqylpy.com/gqy/494

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!