jQuery杂记

jQuery杂记

DOM对象与jQuery对象转换

// 1.DOM对象转换成jQuery对象，方法只有一种
var box = document.getElementById('box');  // 获取DOM对象
var jQueryObject = $(box);  // 把DOM对象转换为 jQuery 对象

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

//   2.2 jQuery对象.get(索引值)
var domObject2 = $('div')[0]

1.基础选择器 

名称	用法	描述
ID选择器	$('#id')	获取指定ID的元素
全选选择器	$('*')	匹配所有元素
类选择器	$('.class')	获取同一类class的元素
标签选择器	$('div')	获取同一类标签的所有元素
并集选择器	$('div,p,li')	选取多个元素
交集选择器	$('li.current')	交集元素

 2.层级选择器

名称	用法	描述
子代选择器	$('ul>li')	使用>号 获取亲儿子层级的元素；并不会获取孙子层级的元素
后代选择器	$('ul li')	使用空格 代表后代选择器  获取ul下的所有li元素 包括孙子

3.筛选选择器

 4.知识小点

1.jQuery 设置样式

$('div').css('属性', '值') 

2.jQuery 里面的排他思想

// 想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);

 3.隐式迭代

// 遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
// 简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。
$('div').hide();  // 页面中所有的div全部隐藏，不用循环操作

4.链式编程

// 链式编程是为了节省代码量，看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');

4.jQuery 样式操作

方法1: 操作 css 方法

jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式。

// 1.参数只写属性名，则是返回属性值
var strColor = $(this).css('color');

// 2.  参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(''color'', ''red'');

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

方法2: 设置类样式方法

作用等同于以前的 classList，可以操作类样式， 注意操作类里面的参数不要加点。

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

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

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

注意： 1.设置类样式方法比较适合样式多时操作，可以弥补css()的不足。

            2.原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

5.jQuery 效果

jQuery 给我们封装了很多动画效果，最为常见的如下：

• 显示隐藏：show() / hide() / toggle() ;

• 划入画出：slideDown() / slideUp() / slideToggle() ;

• 淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;

• 自定义动画：animate() ;

注意：

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法，可以停止动画排队：stop() ;

 

脚踏实地，仰望星空！