JQuery从0到大技术牛人学习之路!
来源:程序员人生 发布时间:2016-09-06 15:34:36 阅读次数:4248次
1、JQuery简介
1.1简介
jQuery是继prototype以后又1个优秀的JavaScript库。它是轻量级的js库
,它兼容CSS3,还兼容各种阅读器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8阅读器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的1个利用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有1个比较大的优势是,它的文档说明很全,而且各种利用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入1堆js来调用命令了,只需要定义id便可。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax和其他功能。除此之外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
1.2优点
- (1)写少代码,做多事情【write less do more】
- (2)免费,开源且轻量级的js库,容量很小
- 注意:项目中,提倡援用min版的js库
- (3)兼容市面上主流阅读器,例如 IE,Firefox,Chrome
- 注意:jQuery不是将所有JS全部封装,只是有选择的封装
- (4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能
- (5)文档手册很全,很详细
- (6)成熟的插件可供选择
- (7)提倡对主要的html标签提供1个id属性,但不是必须的
- (8)出错后,有1定的提示信息
- (9)不用再在html里面通过标签插入1大堆js来调用命令了
2、JQuery的9类选择器
使用jquery,首先我们需要去把jquery的包导入,这个jquery的官网上面是可以下载的,地址:https://jquery.com/,目前最新版本是3.0,1般会有两种版本的,1个是完全的,1个是迷你版本的,两个版本就是大小不1样,里面的实质性东西实际上是1样的,而这个迷你版的合适项目正式上线使用,由于占的体积小啊,1般学习或练习的话就能够尝试使用完全版的。下面以几个案例来实际说明jquery的使用,完全的代码会在文末提供下载链接,欢迎下载学习。选择器的部份在下载的文件中的/JQuery\WebRoot\selector目录下。
2.1 基本选择器
-
-
alert( $("#div1ID").size());
-
-
-
-
alert( $("div").length);
-
-
-
-
alert($(".myClass").size());
-
-
-
-
alert($("div,span,p").size());
-
-
-
-
alert($("#div1ID,.myClass,p").size());
2.2 层次选择器
-
-
alert($("form input").size());
-
-
-
alert($(" form > input").size());
-
-
-
-
alert($("form + input").val());
-
-
-
-
alert($("form ~ input").size());
-
2.3 增强基本选择器
-
-
alert($("ul li:first").html());
-
alert($("ul li:first").text());
-
-
-
-
-
alert($("ul li:last").text());
-
-
-
-
alert($(":checkbox:checked").size());
-
alert($(":checkbox:not(:checked)").size());
-
-
-
-
alert($("table tr:odd").size());
-
-
-
-
alert($("table tr:even").size());
-
-
-
-
alert($("table tr:eq(1)").text());
-
-
-
-
-
alert($("table tr:gt(0)").size());
-
-
-
-
alert($("table tr:lt(3)").size());
-
-
-
-
alert($(":header").css("background-color","red").css("color","white"));
2.4 内容选择器
-
-
alert($("div:contains('John')").size());
-
-
-
-
alert($("p:empty").size());
-
-
-
-
$("div:has(p)").addClass("myClass");
-
-
-
-
alert($("p:parent").size());
生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠