一键了解jQuery

一、概念
jQuery网址： https://jquery.com/
jQuery的顶级对象
1、$是jQuery的别称，在代码中可以使用jQuery代替$，为了方便，通常都写成$
2、$是jQuery的顶级对象，相当于原生javascript中window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法
一、概念
1、j就是javasccript，Query查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用功能。
2、jQuery封装了javascript常用的功能代码，优化了DOM操作，事件处理、动画设计和Ajax交互。
3、学习jQuery本质：学习调用这些函数方法
4、
二、jQuery的优点
1、轻量级。核心文件几十kb，不会影响页面加载速度。
2、跨浏览器兼容。基本兼容了现在主流的浏览器
3、链式编程、隐式迭代
4、对事件、样式、动画支持、大大简化了DOM操作
5、支持插件扩展开发。有着丰富的第三方的插件 例如：树形菜单、日期控件、轮播图。
6、免费开源

二、入口函数介绍
官网下载jquery页面，并且引入到html文件中
1、使用

三、jquery和dom的区别
1、用原生js获取过来的对象就是DOM对象。
2、jQuery方法获取的元素就是jQuery对象。
3、jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）
四、选择器
标签选择器
$(“选择器”) 里面直接写CSS选择器即可，但是要加引号
名称 用法 描述
ID选择的器 $("#id") 获取指定的ID元素
全选择器 $("*") 匹配所有的元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $(“div”) 获取同一类标签的所有元素
并集选择器 $(“div,p,li”) 选取多个元素
交集选择器 $(“li.current”) 交集选择器
层级选择器
名称 用法 描述
子代选择器 $(“ul>li”); 使用>号，获取亲儿子层级的元素； 并不会获取孙子层级的元素
后代选择器 $("ul li "); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子
筛选选择器
语法 用法 描述
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(“li:eq(2)”) 获取到li元素中，选择索引号为2的元素，索引号index从0开始
:odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”) 获取到li的元素中，选择索引号为偶数的元素
筛选方法 parent（） children（） find（） sibling（） eq（）
语法 用法 说明
parent() $(“li”).parent(); 查找父级

		parents()	$("li").parents();	返回指定的祖先，从自身开始查找
		children(selector)	$("ul").children("li");	相当于$("ul>li"),最近一级（亲儿子）
		find(selector)	$("ul").find("li");	相当于$("ul li"),后代选择器
		siblings(selector)	$(".first").siblings("li");	查找兄弟节点，不包括自己本身
		nextAll([expr])	$(".first").nextAll();	查找当前元素之后所有的同辈元素
		prevtAll([expr])	$(".last").prevAll();	查找当前元素之前所有的同辈元素
		hasClass(class)	$('div').hasClass("protected");	检查当前的元素是否含有某个特定的类，如果有，则返回true
		eq(index)	$("li").eq(2);	相当于$("li:eq(2)"),index从0开始

五、样式设置
jquery设置样式
参数是属性名、属性值、逗号分隔，属性必须加引号，值如果是数字可以不用跟单位和引号

修改样式属性
	$("div").css('属性值','值')
	
	
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
  // 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
  $("div").css({
                "width": 500,
                "height": 500
            })
        });

设置类样式方法：
作用等于以前的classList，可以操作类样式，注意操作类不要加点
添加类addClass()只是对指定的类进行操作，不影响原先的类名
$(“div”).addClass(“current”);
删除类removeClass()
$(this).removeClass(“current”);
切换类 toggleClass()
$(this).toggleClass(“current”);
显示元素 . show（）：
例子：
$(this).children(“ul”).show();
隐藏元素hide（）
例子：
$(this).children(“ul”).hide();
六、属性操作
获取属性值固有属性用prop

获取href属性：element.prop(“属性”)
设置属性：prop(“属性”，“属性值”)；
获取自定义属性用index

我是div

获取属性：attr(“属性”) //类似原生getAttribute()
设置属性：attr(“属性”,“属性值”) //类似原生setAttribute()
数据缓存data()
这个里面的数据是存放在元素的内存里面，是不显示的并不会影响DOM元素结构，一旦页面刷新，之前存放的数据将被移除
附加数据：datda(“name”,“value”)//向被选的元素附加数据
获取数据：data(“name”)// 向被选的元素获取数据
$("span").data("uname","andy");console.log($(“span”).data(“uname”));
HTML5自定义属性data-index，得到的是数字型
这个方法获取data-index h5自定义属性 第一个不用写data- 而返回的数字型

我是div

console.log( $("div").data("index"));属性获取val（）获取input元素中value的值html()获取标签中文本的值//1.获取设置元素内容html()console.log($(“div”).html());
// $("div").html("123");//2.获取设置元素文本内容text()console.log($(“div”).text());
$(“div”).text(“123”);

        // 3. 获取设置表单值 val()
        console.log($("input").val());
        $("input").val("123");

保留小数
toFixed(2);
七、遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作，就需要用到遍历
语法：
$("").each(function(index,domEle))1、each（）方法遍历匹配的每一个元素，主要用DOM处理，each每一个2、里面回调函数有两个参数：index是每个元素的索引号；demEle是每个DOM元素对象，不是jQuery对象3、要使用jQuery方法，需要给这个dom元素转换为jquery对象$(domEle)
八、元素操作

• 
  
• 原先的li
• 
  

我是原先的div

1、创建元素
var li = $(“

• 我是后来创建的li
• ”);

  2、添加
  (1) 内部添加
  $(“ul”).append(li); 内部添加并且放到内容的最后面
  $(“ul”).prepend(li); // 内部添加并且放到内容的最前面
  (2) 外部添加
  var div = $(“

  我是后妈生的
  ”);
  $(".test").after(div);内容的最后面
  $(".test").before(div);内容的最前面
  3、删除元素
  $(“ul”).remove(); 可以删除匹配的元素 自杀
  $(“ul”).empty(); // 可以删除匹配的元素里面的子节点 孩子
  $(“ul”).html(""); // 可以删除匹配的元素里面的子节点 孩子