Jquery总概述

1.什么是JQuery?
就是对JS事件和函数的一个封装
2.设计理念？
写更少的代码完成更多的功能
3.好处？
解决大部分浏览器的兼容
强大的选择器
对DOM操作的封装
和ajax完美的结合
强大的插件支持
4.怎么用？
1.先到官网下载相应的版本库，分为两种，一种是开发版，一种是发布版
开发版比发布版体积大
2.在页中通过script标签引入jquery库
3.通过页面加载函数来写JQUERY代码：
$(function(){});
$(document).ready(function(){});
这两种写法都可以，都表示页面元素加载完之后执行，类似
于JS中的window.onload事件，区别是:
1.widow.onload一定是页面中所有元素加载完（所有元素包含图片，视频文件之类的）才执行
而jquery只要页面中的所有标签都加载完（不管标签关联的图片，文件是否加载完）就执行
2.widow.onload在页面中只能写一次
而jquery的加载函数可以在页面中写多个
3.widow.onload没有简写的方式
而jquery的加载函数有简写的方式：$(function(){});
5.jquery的语法:
$(selector).action();
$():工厂函数，主要是用来把dom对象变成jquery对象
selector:指选择器，用来选择DOM对象的
action():指的是jquery中的事件或者是函数
6.常用的修改样式的方法
css()
addClass()
7.jquery对象与dom对象之间的转换
Dom转JQUERY：
通过$(DOM)
JQUERY转DOM：
通过下标：$("#id")[下标]或者$("#id").get(下标)


6.jquery中的选择器
按照大的方向来分：CSS选择器和过滤选择器
CSS选择器中有
基本选择器:
标签选择器
ID选择器
类选择器
全集选择器
并集选择器
交集选择器
案例：
//找到页面中所有的H2标签对象,这时就可以用标签选择器
$("h1").css("background-color","purple");
//找到页面中所有class值是con的元素,这时就可以用类选择器
$(".con").css("font-size","35px");
//找到页面中id值为hr的元素，这时就可以用id选择器
$("#hr").css("width","200px").css("height","50px")
.css("background-color","deepskyblue");
//想把页面中所有的元素的字体变成10px，这时就用全局选择器k
$("*").css("font-size","10px");
//想让页面中一些不同标签或者是指定的类名或者是指定的ID名用同样的样式，这时就可以用并集选择器
$("h1,.abc,#contanier").css("color","greenyellow");
//要找class值为h的所有h1标签,这是就可以用交集选择器
$("h1.h").css("color","red");
//要找id为contanier的那个DIV，,这是就可以用交集选择器
$("div#contanier").css("font-family","楷体");

层次选择器
就是通过DOM之间的层次关系或者是兄弟关系来查找元素
后代选择器：找指定元素的子代以及子子代，以空格隔开
子代选择器：找指定元素的直接子代，以>隔开
相邻兄弟选择器：找指定元素的下一个相邻兄弟元素，以+隔开
同辈选择器：找指定元素的后面的所有兄弟元素，以~隔开

案例：
//选择id为maindiv里的所有子DIV,这是用后代选择器
//后代选择器中间是用空格隔开，会找到儿子，孙子，子孙子。。。
$("#maindiv div").css("background-color","red");
//选择id为maindiv里的直接子DIV，这是用子代选择器
//子代选择器用 > 隔开，只找儿子
$("#maindiv > div").css("background-color","green");
//找id为maindiv的下一个相邻兄弟元素h1
$("#maindiv + h1").css("color","blue");

//找id为maindiv的后面所有的兄弟元素h1
$("#maindiv ~ h1").css("color","orange");


属性选择器:就是根据指定的属性或者属性值来查找元素
[属性='指定字符']：查找有指定属性并且值等于指定字符的元素
[属性!='指定字符']：查找有指定属性并且值不等于指定字符的元素
[属性^='指定字符']：查找有指定属性并且值以指定字符开头的元素
[属性$='指定字符']：查找有指定属性并且值以指定字符结尾的元素
[属性*='指定字符']：查找有指定属性并且值包含指定字符的元素
[属性!='指定字符'][其他属性]：查找指定多个属性的元素
$("a[href*='f'][target]").css("color","red");


过滤选择器：可以根据指定的条件去查找元素，过滤选择器最主要
的标识是:
基本选择器常用如下：
:first 查找第一个元素
:last 查找最后一个元素
:eq(索引) 查找等于指定索引的元素
:gt(索引) 查找大于指定索引的元素
:lt(索引) 查找小于指定索引的元素
:even()查找偶数行
:odd()查找奇数行
:header 查找所有标题标签
:not(选择器) 查找不是指定选择器的元素
可见性选择器:
:hidden 表示查找隐藏的元素
:visible 表示查找显示的元素
注意：这个显示只针对于display属性有效
注意：如果选择器名里有特殊符号，需要转义，在特殊符号前加\\
过滤选择器在写的时候，：前面有没有空格很关键，如果加了
空格，就表示后代，所以不加空格，就表示在指定标签找符合过滤条件的