JQ的基本使用

JQ的基本使用

作为一个小白，我在我所学的知识给大家阐述一下JQ的基本使用方法。

JQ就是jQuery的简称。JQ的简单理解就是一个JS文件，里面对我们原生的JS代码进行了封装，存放到里面。从而是我们可以快速有效的使用这些封装好的功能。其宗旨就是写更少的代码，做更多的事情。

一、JQ的优点有:

1. 轻量级。
2. 链式编程、隐式迭代
3. 基本兼容了现在主流的浏览器。
4. 大大简化了DOM的操作
5. 有着丰富的第三方插件
6. 最主要的免费

二、jQuery的入口函数

(1)第一种:

$(function(){

.. //此处是页面DOM加载完成的入口

})

(2)第二种:

$(docment).ready(function(){

.. //此处是页面DOM加载完成的入口

})

注意点:等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。

更推荐使用第一种方式。

三、JQ的基本使用

1. $是JQ的别称，在代码中使用JQ代替$，但一般为了方便，通常都是用$。
2. $是JQ的顶级对象，相当于原生JS中的window。把元素利用$包装成JQ对象，就可以调用JQ的方法。

 四、JQ选择器

原生JS获取元素方式很多，很杂，而且兼容情况不一致，因此JQ给我们做了封装，使获取元素统一标准

1. JQ选择器
   1. $(‘#id’)-->指定id选择器
   2. $(‘*’)-->所有元素
   3. $(‘.class’)-->指定class元素
   4. $(‘div’)-->指定标签获取元素
2. 1. $(‘div,p,li’)-->获取多个
   2. $(‘li.calss’)-->交集获取
   3. $(‘ul>li’)-->子代
   4. $(‘ul li’)-->后代
3. JQ筛选方法
4. $(‘li’).parent()  //父级
5. $(‘ul’).children(‘li’)  //子级[加入参数按照指定的寻找，不加入参数获取所有子级]
6. $(‘ul’).find(‘li’)   //后代[和子级不同 子级只寻找挨着父级最近的那一个子级，这个可以找到父级下面所有的子级]
7. $(‘li’).sibkings(‘li’)  //兄弟
8. $(‘li’).nextAll()    //找到这个元素后面的所有元素
9. $(‘li’).prevAll()    //找到这个元素前面的所有元素
10. $(‘div’).hasClass(‘aaa’)   //判断是否具有某个类名
11. $(‘div’).eq(index)   //指定索引方法  

 五、操作CSS方法

1.参数只写属性名，则是返回属性值

$(this).css(‘color’);

2.参数是属性名，属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号

$(this).css(‘color’,’red’); //修改颜色css样式

3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({‘color’:’wihite’,’font-size’:’20px’});

4.添加类

$(‘div’).addClass(‘current’);

5.移除类

$(‘div’).removeClass(‘current’);

6.切换类

$(‘div’).toggleClass(‘current;);

注:current是类名。

六、JQ里面的排他思想

想要多选一的效果，排他思想:当前元素设置样式,其余的兄弟元素清楚样式

$(this).css(‘color’,’red’);

$(this).siblings().css(‘color’,’’)；

七、JQ的效果

1、显示效果

show([speed],[easing],[fn])

hide([speed],[easing],[fn])

toggle([speed],[easing],[fn])

注：参数都可以省略，无动画直接展示。

speed:表示毫秒(如:1000 只可以用毫秒)

easing:用来切换效果，默认是’swing’,可用参数’linear’

fn:回调函数，在动画完成时执行的函数，每个元素执行一次

2、滑动效果

sildeDown([speed],[easing],[fn])

sildeUp([speed],[easing],[fn])

sildeToggle([speed],[easing],[fn])

注：参数都可以省略，无动画直接展示。

speed:表示毫秒(如:1000 只可以用毫秒)

easing:用来切换效果，默认是’swing’,可用参数’linear’

fn:回调函数，在动画完成时执行的函数，每个元素执行一次

3、淡入淡出效果

fandeIn([speed],[easing],[fn])

fadeOut([speed],[easing],[fn])

fadeToggle([speed],[easing],[fn])

fadeTo([speed],[easing],[fn])

注：参数都可以省略，无动画直接展示。

speed:表示毫秒(如:1000 只可以用毫秒)

easing:用来切换效果，默认是’swing’,可用参数’linear’

fn:回调函数，在动画完成时执行的函数，每个元素执行一次

4、自定义效果

animate(params,[speed],[easing],[fn])

注：

params:想要更改的css样式属性，以对象形式传递，必须写。

speed:表示毫秒(如:1000 只可以用毫秒)

easing:用来切换效果，默认是’swing’,可用参数’linear’

fn:回调函数，在动画完成时执行的函数，每个元素执行一次