1.JQuery
1.1 什么是JQuery
(1)、JavaScript与jQuery比较
js: 1、入口函数只有一个,window.onload
- 浏览器兼容性:非常令人头疼,比如textContent虽然作为标准方法但是只支持IE8+以上的浏览器
- DOM错综复杂,实现简单的效果很麻烦
- 代码容错性差,出错后导致后面的代码不执行
jQuery: 1、市场占有率稳步上升,代码比较少,功能强大
2、DOM比较强大,事件处理,完全解决了浏览器的兼容性问题
3、ajax操作(比较好)
(2)、什么是jQuery
1、jQuery是一个JavaScript函数库。
2、jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
3、jQuery库包含以下功能:HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和HTML DOM 遍历和修改。
(3)、为什么使用jQuery
1、目前网络上有大量开源的 JS 库, 但是 jQuery 是目前最流行的 JS 库,而且提供了大量的扩展。
2、很多大公司都在使用 jQuery, 例如:Google、Microsoft、IBM、Netflix。
3、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!
- jQuery安装
1、从 jquery.com 下载 jQuery 库,本地加载
jQuery 库是一个 JavaScript 文件,您可以使用 HTML 的 <script> 标签引用它:
<head>
<script src="jquery-1.10.2.min.js"></script>
</head>
2、从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery,联网加载
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
</head>
1.2 JQuery基础语法
<script src="./js/jquery-1.11.1.min.js"></script>
<script>
//JS写法 onload函数
window.onload = function(){
console.log(1);
}
window.onload = function(){
cosole.log(2) ;
}
//var $
//var JQuery = $
//JQuery写法 不会覆盖 会同时打印11 和 22
jQuery(document).ready(function(){
console.log(11);
});
jQuery(document).ready(function(){
console.log(22);
});
//简写方式
$(function(){
console.log('我是$') ;
}) ;
</script>
1.3 JQuery选择器
<script>
//ID选择器
$("#ID选择器") ;
$("#btn") ;
//类名选择器
$(".class属性名") ;
$(".dv");
//标签选择器
$("b标签名");
$("div") ;
//交集选择器
$("选择器.class属性值") ;
//dv是类名
$("div.dv")
//并集选择器
$("选择器,选择器,....") ;
$("div,li,a") ;
//子代选择器
$("父代选择器>子代选择器");
$("ul>li") ;
//后代选择器
$("选择器 选择器") ;
$("ul a") ;
//属性选择器
//有type属性的input标签
//中括号
$("input[type]") ;
//有type属性值为password的input标签对象
$("input[type = password]") ;
//有href属性的a标签
$("a[href]") ;
//^ : 打头
//$ : 结尾
//有href属性并且是http开头的a标签;
$("a[^=http]") ;
//有href属性并且是com结尾的a标签 ;
$("a[$=com]") ;
</script>
1.4 过滤选择器
//css() : 设置样式
//1.可以链式调用
//2.传入一个参数,如果是对象,那么就是设置多个属性值
//3.传入一个参数,如果是个字符串,那么就是返回这个属性对应的值
//4.传入两个参数,第一个是属性,第二个是值,为该属性设置值,设置单个属性
//下标从0开始
//获取所有的li,然后只要第三个
//$("li.eq(2).css('color','red')") ;
//odd 奇数 ,even 偶数,下标0开始
//引号中,可以写,也可以转换为首字母大写,但是不在引导中则必须转换为大写
// $("li:even").css({
// 'background-color':'red' ,
// fontSize:'20px'
// });
//小于第三个的
$("li:lt(2).css('color',''pink)") ;
//大于第四个的
$("li:gt(3).css('color','green')") ;
1.5 筛选选择器
//获取div的所有子标签
// $("div").children().css('color','red') ;
// //获取div下指定子标签(不包括后代,只包括子代)
// $("div").children("span").css('color','red') ;
//获取div下指定后代的标签
// $("div").find("span").css('color','red');
//获取第二个子标签(下标从0开始)
// $("div").children().eq(1).css('color','red') ;
//获取h2素有的兄弟(同级别,当前作用域中,非自己)
// $("h2").siblings().css('color','red');
//next下一个弟弟妹妹,nextAll : 所有的弟弟
// $("h2").next().css('color','red') ;
// $("h2").nextAll().css('color','red') ;
//prev上一个哥哥 .prev : 所有的哥哥
// $("h2").prev().css('color','red') ;
// $("h2").prevAll().css('color','red') ;
//父标签
// $("h2").parent().css('color','red') ;
//not不要的
// $("div").children().not("h,span").css('color','red') ;
//获取span标签在div中的索引(是第几个标签,下标0开始)
//1
//console.log($("div".children("span").index)) ;