JQuery

jQuery

0. 基本知识

0.1 jQuery对象和DOM对象

1. 原生的JS获取的就是DOM对象

   var mydiv = document.querySeletor('div');
   console.dir(mydiv);
   

2. 使用jQuery获取的对象是JQuery对象

   $('div');
   console.dir($('div'));
   

   1. 利用$对DOM对象进行包装后产生的对象
   2. 伪数组的形式 即采用下标的形式访问

3. 两者不可以调用各自的方法

   1. 有些方法是原生js独有的，jQuery没有进行封装，所以要想调用，只能进行DOM对象和jQuery对象的转换

4. 两者的转换方法

   1. 原生的js的大一些 jQuery只是封装了常用的方法

   2. jQuery对象转为原生的DOM对象

      $('video')[0].play();
      or
      $('video').get(0).play();
      

0.2 jQuery 入口函数

相当于等网页的DOM元素都加载完成之后再进行

$(function(){
  //....
})

1. 常用API

1.1 jQuery 选择器

隐式迭代：自动遍历选择的伪数组元素

1.1.1 类选择器

$(".nav")	// 类选择器

1.1.2 层级选择器

1.1.3 后代选择器

子子孙孙

$("ul li");

1.1.4 子代选择器

亲儿子

$("ul>li"); 

1.1.3 筛选选择器

:first	$('li:first')	获取第一个元素
:last	$('li:last')	获取最后一个元素
:eq(index)	$('li:eq(2)')	获取index为2的li元素
:even	$("li:even")	获取到的li元素的偶数的元素
:odd	$('li:odd')	获取到的li元素的奇数的元素

parent()	$('li').parent()
children(selector)	$('ul').children("li")
find(selector)
siblings(selector)
nextAll([expr])
prevAll([expr])
eq(index)	$('li').eq(2);

1.2 jQuery 样式操作

1.2.1 设置样式

$('div').css('attr','value');

1.2.2 获取样式值

$('div').css('attr');//返回的就是attr属性的值

1.2.3 多个样式值的修改

$('div').css({
  width:400,
  hight:400,
  backgroundColor:"red", //如果遇到复合属性 则采用驼峰命名
})

---

常用操作

1.2.4 添加类 addClass()

定义一个样式 然后将这个样式添加到某个元素上

1.2.5 删除类 removeClass()

把元素的某个样式移除

1.2.6 切换类 toggleClass()

如果某个元素有某个样式，那就移除

如果某个元素没有某个样式，那就添加上

1.3 jQuery 效果

1.4 jQuery 属性操作

1.5 jQuery 文本属性值

1.6 jQuery 元素操作

1.7 jQuery 尺寸、位置操作

隐藏和显示

hide();
show();

事件

$(this).index();

• 点击事件
• 鼠标事件
  • 鼠标划过 mouseover(function(){})
  • 鼠标离开 mouseout(function(){})