JQuery基础知识

JQuery

为什么要使用JQuery

1. jQuery 是一个 JavaScript 库。
2. jQuery 极大地简化了 JavaScript 编程。
3. jQuery 很容易学习。

下载方式：官网上可以下载所有的jq文件。

不同的版本号

JQuery 1.x 已经不更新了 支持老浏览器 IE6-8 Opera等
JQuery 2.x 已经不更新了 不支持浏览器
JQuery 3.x 正在更新中 不支持浏览器

【注】每个版本有压缩和未压版的
压缩版的 是用于生产环境 实际开发过程
未压缩版的 适用于开发测试

jq是什么？

1. jq是一个快速 小型且功能丰富的JavaScript库,它使用一个在多种浏览器上工作易于使用的API，使得HTML文档便利和操作 事件处理 动画和Ajax等工作变得更加简单,随着多功能性和可扩展性的结合
2. jq改变了数百万人编写js的方式

基础语法：$(selector).action()

1.美元符号定义 jQuery
2.选择符（selector）“查询"和"查找” HTML 元素
3.jQuery 的 action() 执行对元素的操作

jQuery 选择器

1.元素选择器

jQuery 元素选择器基于元素名选取元素。

2.#id 选择器

#id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

3. .class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

4.子代选择器

$("父元素>子元素")

5.后迭代选择器

$("父元素 后代元素") 

【补】：children(选择器) 子类选择器 $(“父元素>子元素”) 用法 $(“父元素”).children(“子元素选择器”)
find(选择器) 后代选择器 $(“父元素 子元素) 用法 $(“父元素”).find(“子元素选择器”)
siblings(选择器) 兄弟选择器 $(我的是兄弟节点 不包括自己) 用法 $(“兄弟元素”).siblings(“兄弟元素”)
parent() 父元素选择器 用法 $(“选择器”).parent()
next() 下一个兄弟元素 用法 $(“选择器”).next()
prev() 上一个兄弟元素 用法 $(“选择器”).prev()
eq(index) 找对应索引的元素 $(“li:eq(0)”) 用法 $(“li”).eq(0)

过滤选择器前面都会加一个冒号

   :odd 找到索引号为奇数行的元素
   :even 找到索引号为偶数行的元素
   :eq(index) 找到传入的索引号对应的元素

如何引用JQuery?

如果没有引入jq文件 那么就会报错 Uncaught ReferenceError: is not defined 那么说明一定是jq文件未引入

$(function () {
  console.log();
})

$从jQuery文件来的 那么它到底是什么？

(function () {
})(window.Function(){
 给window对象添加一个jq方法和$方法 对应的值是一个函数
 window.jQuery = window.$ = jQuery;
})

$既然是一个函数 那么它也可以传入多种参数

如果传入的参数是一个匿名函数 那么$就是一个入口函数
如果传入的参数是一个字符串 那么$就是一个选择器获取元素
如果传入的参数是一个dom元素 那么$就是把这个DOM元素在转换成jQuery对象 

入口函数

1.入口函数的第一种写法

$(document).ready(function(){
	console.log("我是第一种入口函数的写法");;
}) 

2.简化版 使用较多

$(function(){
	console.log("我是第二种入口函数写法");;
}) 

.jQuery的入口函数与原生的区别

1.原生的入口函数只能写一个,如果写多个 后面的将前面的覆盖掉 前面的代码多不会执行   jQuery的入口函数可以写多个
2.执行时机 原生入口函数  等到所有的页面(dom树 外部的js文件 外部的css文件 图片)加载完毕后才会执行jQ的入口函数可以写多个

Dom元素和Jquery

1. 使用DOM元素(原生js的方法)给div添加属性
   原生js选择器获取到的是dom对象 document.getElementsByClassName()
   原生的DOM元素只能选用dom属性或者方法 不能调用jQuery的方法
   var one= document.getElementById(“one”);
   console.log(one);

使用jQuery对象

使用jQuery选择器获取都得是jQuery对象
只能调用jQuery的方法 不能调用原生的 

jQuery对象是什么？

根据特征来看 向数组 验证是不是数组
jQuery 对象算是一个伪数组  不能调用数组里面的方法

DOM和jQuery对象的相互转换

dom元素转换成jQuery对象 : 直接把dom作为参数传递给$方法

	var $divOne = $(one);
	console.log($divOne);

把jQuery对象转换成dom元素 直接使用下标取值 获取到的就是dom元素

	$divs = $("div");
	console.log($divs);
	var divOne = $divs[0];
	console.log(divOne);