jq简单总结

第一种：

$(function(){

});

第二种：

$(document).ready(function(){

});

第三种：

jQuery(function(){

});

需要注意的是

js和jq的入口函数不同点：

    1：js的入口函数只能有一个，如果写了多个只执行最后一个

    2：jq的入口函数可以写多个，并且顺序执行

2 Dom对象和jq对象是不能通用方法属性的，必须要通过转化才可以 

    dom转jq：$(ele)

    jq转dom： 1、$(‘div’).get(0)  2、$(‘dv’)[0]

 

3 jq控制css属性

    使用.css()方法来实现

语法：

1、     单属性修改： .css(‘属性名’,’属性值’);

2、     多属性修改： .css({‘属性名1’:’属性值1’,’属性名2’:’属性值2’…..});

3、     属性获取： .css(‘属性名’);

 

 4  jq控制标签属性

 只要使用.attr()方法即可，它的语法和css()的语法完全一样

 

 5 jq设置html内容

    使用.html()方法即可

    获取html内容： $(‘span’).html();

    设置html内容： $(‘span’).html(‘呵呵’);

 

 6 jq的简单动画

   

对角线动画：

1、     show() 显示

2、     hide()  隐藏

3、     toggle() 切换

注意：对象线动画如果不添加时间参数，就没有动画效果哦

滑动动画：

1、slideUp()    隐藏

2、slideDown()  显示

3、slideToggle()  切换

注意：如果控制滑动动画的元素没有宽高属性，那么jq就会把动画改为对角线动画来展示

注意：时间参数可以写数字，也可以写英文单词字符串-fast、slow、normal

 

7 jq的基本选择器

$("#id") : id选择器,document.getElementById("id");

$(“div”) :标签选择器

$(".myClass") : 类选择器,返回所有class="myClass"的元素

$("*") : 返回所有元素,多用于结合上下文搜索

$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素

$(‘.ul01 .li02’) :后代选择器

$(‘.ul01 .li02>li’):表示子代选择器 ， 只能选择第一级的后代。

$('.ul01 .li02+li'):表示选中指定标签后面紧挨着的一个同级标签

$('.ul01 .li02~li'):表示选中指定标签后面的所有同级的某种标签

 

 8  过滤选择器

 过滤选择器的特点是在小括号中写冒号

         :gt(2)    大于2

         :lt(2)     小于2

         :not(.class01)  排除某些元素

         :eq(1)     选索引值

         :first      选第一个

         :last       选最后一个

9   筛选选择器

选父级元素   .parent()
选儿子级元素 .children()

选兄弟级元素 .siblings()

 10  hover事件

语法格式：

    .hover(function(){

         //这里是鼠标移入执行的代码

},function(){

         //这里是鼠标移出执行的代码

})

注意：如果只写了一个匿名函数，就代表移入和移出执行的是同样的代码

 

11 jq动画排队机制

在jq中如果多次触发动画，那么这些动画就会排队等待执行，如果不想要这个排队效果，我们就在动画之前添加一个.stop()方法即可

             $('.demo>li').hover(function(){

                  //鼠标移入和鼠标移出执行的是一样的代码

                  $(this).children('ul').stop().slideToggle(); 

             })

 

 12  jq中的索引值

    直接使用.index()即可获取索引值

 

13  jq的链式编程

在jq中，如果是针对同一目标进行的操作，就可以使用“点“语法来实现连续书写代码

$('.conCenter li').eq($(this).index()).siblings().hide()

 

14、jq中控制类

addClass(‘myClass’)     添加类名

removeClass(‘myClass’)  删除类名

hasClass(‘myClass’)     判断是否含有某一个类名

toggleClass(‘myClass’)   切换某一个类名