jQuery

1.1 初认识

1.1.1 入口函数

作用相当于onload事件,等dom结构渲染完毕即可执行

但又有所不同

onload 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

// 第一种
$(function () {   
    ...  // 内容
}) ; 

// 第二种
$(document).ready(function(){
   ...  //  内容
});

1.1.2 顶级对象$

可以用jQuery来代替，相当于原生js中的window

1.1.3 jQuery 对象和 DOM 对象

1. 用原生 JS 获取来的对象是 DOM 对象
2. jQuery 方法获取的元素是 jQuery 对象。
3. jQuery 对象是经过包装的dom对象（伪数组形式存储）

jQuery对象才能使用jQuery方法,不能混用

1.1.4 jQuery对象和Dom对象转换

// DOM对象转换成jQuery对象
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

// jQuery 对象转换为 DOM 对象两种方法：
//  jQuery对象[索引值]
var domObject1 = $('div')[0]
// jQuery对象.get(索引值)
var domObject2 = $('div').get(0)

2.1 jQuery选择器

2.1.1 基础选择器

2.1.2 层级选择器

2.1.3 筛选选择器

2.1.4 其他选择器

2.2 基础知识

2.2.1 排他思想

$(this).css(“color”,”red”);//自己变色
$(this).siblings(). css(“color”,””);//兄弟除色

2.2.2 隐式迭代

在jQuery内部会遍历dom对象的过程叫做隐式迭代

$('div').hide(); //页面中所有的div都会被隐藏

2.2.3 链式编程

$(this).css('color', 'red').sibling().css('color', ''); 

3.1 样式操作

3.1.1 操作css

var strColor = $(this).css('color');

$(this).css(''color'', ''red'');

//参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开， 属性可以不用加引号
$(this).css({ "color":"white","font-size":"20px"});

一般来说通过在style中编写样式，通过添加类的方式添加样式

3.1.2 设置类名方法

// 1.添加类
$("div").addClass("current");

// 2.删除类
$("div").removeClass("current");

// 3.切换类
$("div").toggleClass("current");

在原生js中className会覆盖类名，在jQuery中指操作指定类名，不影响原先的类名