jquery基础知识点总结

jquery 的入口函数

方式一

$(function () {  
           ... //此处是页面DOM加载完成的入口
        })    

方式二

$(document).ready(function () {  
            // ... //此处是页面DOM加载完成的入口
        })

注意：使用jquery获取的对象叫做jquery对象，只能使用jquery的方法，使用原生js获取的对象叫做DOM对象，只能使用原生方法，两者不能混用

因此可以让jquery对象跟DOM对象相互转换

1. DOM对象转换为jQuery 对象： $(DOM对象) 注意括号中传入DOM对象，不要加引号

2. jQuery 对象转换为DOM对象（两种方式）

$(‘div’)[index]==index是索引号==$(‘div’).get(index) index是索引号

由于jquery对象是一个伪数组，伪数组的概念有length的一个对象，一般获取的是单个jquery对象，因此index为0

jQuery选择器

1. jQuery 基础选择器

​ ID选择器 $("#id") 获取指定ID元素

​ 全选选择器 $("*") 匹配所有元素

​ 类选择器 $(".class") 获取同一类选择器

​ 标签选择器 $(“div”) 获取同一类标签的所有元素

​ 并集选择器 $(“div,p,li”) 获取多个元素

​ 交集选择器 $(“li.current”) 交集元素

2. 筛选选择器

   $(“div”).css(‘background-color’, ‘pink’);

   $(‘ul li’).css(‘color’, ‘blue’);

   $(‘ul li:first’).css(‘color’, ‘red’);

   $(‘ul li:last’).css(‘color’, ‘red’);

   $(‘div:eq(2)’).css(‘background-color’, ‘yellow’); 选择器方式

   $(“div”).eq(2).css(“background-color”,“yellow”); 方法的方式

   $(‘div:odd’).css(‘background-color’, ‘yellow’); 选出奇数

   $(‘div:even’).css(‘background-color’, ‘yellow’); 选出偶数

​ 3.jQuery 筛选方法（重点!!!）

​ parent() $(“li”).parent(); 查找父级

	children(selector) $("ul").children("li")     ==相当于$(ul>li) 最近一级（亲儿子）==

	find(selector)   $("ul").find("li")       ==相当于$("ul>Li") 后代选择器==

​ siblings(selector) $(".first").siblings(“li”) 查找兄弟节点，不包括自己本身

	nextAll([expr])   $(".first").nextAll       ==查找当前元素之后所有的同辈元素==

​ prevtAll([expr]) $(".last").prevAll 查找当前元素之前所有的同辈元素

	hasClass(class)   $("div").hasClass("protected") ==检查当前的元素是否含有某个特定的类，如果有返回true==

​ eq(index) $("li").eq(2)==相当于$(“li:eq(2)”),index从0开始==

重点记住：parent() children() find() siblings() eq()

隐式迭代就是把匹配的所有元素内部进行遍历循环，给每个元素添加一个CSS这个方法！！！！！jquery默认内部可以隐式迭代

jQuery中的排他思想
            案例
            // 1. 核心原理： 鼠标经过左侧盒子某个小li， 就让内容区盒子相应图片显示， 其余的图片隐藏
            // 2. 需要得到当前小li的索引号， 就可以显示对应索引号的图片
            // 3. jQuery得到当前元素索引号$(this).index()
            // 4. 中间对应的图片， 可以通过eq(index) 方法去选择
            // 5. 显示元素show() 隐藏元素hide()
            $(function() {
                $('#left li').mouseover(function() {
                    var index = $(this).index();
                    $('.content div').eq(index).show();
                    $('.content div').eq(index).siblings().hide();
                })
            })

链式编程: $(this).css('color','red').sibling().css('color','');

jQuery样式操作

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

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

$(this).css(“color”) 【 返回的是个字符串 】

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

$(this).css(“color”,”red”)

3. 参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号，如果是复合属性必须采取

驼峰命名法，去掉‘-’值是数字可以去掉引号，不是数字可以去掉引号

$(this).css({“color”:”white”,”font-size”:”20px”})

jQuery效果

设置类样式方法

// 1.添加类

$(‘div’).click(function() {

​ $(this).addClass(‘current’);

​ })

// 2.删除类

​ $(‘div’).click(function() {

​ $(this).removeClass();

​ })

// 3.切换类

​ $(‘div’).click(function() {

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

​ })

类操作与className会覆盖元素原先里面的类名

jQuery里面类操作只是对指定类进行操作，不影响原先类名

jQuery属性操作

jQuery给我们封装了很多动画效果

1.显示语法规则

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

2.显示参数

​ 可以都省略，无动画直接显示

​ speed:三种预定速度字符串（slow normal fast）

​ easing:(Optional)用来指定切换效果，默认是’swing’可用参数’linear’

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

1.隐藏语法规则

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

2.显示参数 可以都省略，无动画直接显示

​ speed:三种预定速度字符串（slow normal fast）

​ easing:(Optional)用来指定切换效果，默认是’swing’可用参数’linear’

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

jQuery 滑动下拉 上拉 切换

slideDown() slideUp(5000) slideToggle(5000)

事件切换 hover([over,]out)

1. over: 鼠标移动到元素上要触发的函数（相当于mouseenter）

2. out： 鼠标移出元素触发的函数

解决动画排队，使用stop()先结束上个动画

$(‘div’).stop().slideDown();

淡入淡出效果

fadeIn() fadeOut() fadeToggle() fadeTo(500, 0.5)【修改透明度】

$(‘div’).hover(function(){ // 鼠标悬停，离开两个时候的动画效果

动画效果

},function(){

动画效果

});

自定义动画 animate 【不能是文档，只能是元素做动画----注意： $(document).animate() 不正确 】

语法： animate(params,[speed],[easing],[fn])

参数：

1. params:想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采用驼峰命名

法borderLeft。其余参数都可以省略

2. speed:三种预定速度字符串（slow normal fast）

3. easing:(Optional)用来指定切换效果，默认是’swing’可用参数’linear’

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

一定是jquery做动画，必须是jquery对象，因此DOM对象前一定要加 $

jQuery元素操作

jQuery遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作，如果向要给同一类元素做不同操作，就需要用到遍历元素

语法一：

var arr = ["red", "yellow", "pink"];
$("div").each(function(index, domEle) {
	$(domEle).css("color", arr[index]);            //转换成jQuery对象后再操作
});

第一个参数是索引，第二个参数是dom元素对象

语法二：

$.each(object,function(index,element){xxx;})

1.$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象

2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容

创建元素

语法：

​ $("

• ");

  添加元素

  ​ 内部添加

  ​ element.append(“内容”)

  ​ var li = $(“

• 我是后来创建的li
• ”);

  ​ $(“ul”).prepend(li);

  把内容放入匹配元素的最后面，类似原生appendChild

  放在目标元素内部

  prepend放前面 append放后面

  放在目标元素外部

  before放前面 after 放后面

  删除元素

  $(“ul”).remove() //删除匹配元素本身（元素不在）

  ​

  这两个效果一样

  $(“ul”).empty() //删除匹配元素集合中所有子节点（元素还在）

  $(“ul”).html("") //清空匹配元素内容（元素还在）

  jQuery尺寸位置操作

  jQuery位置

  位置主要有三个：

  ​ offset() 、 position() 、 scrollTop()/scrollLeft()

  offset()设置或获取元素偏移 【文档偏移距离，得到的是一个top和left的对象】

  1.offset()方法设置或返回被元素相对于文档的偏移坐标，跟父级没有关系

  2.该方法有2个属性 left /top offset().top用于获取距离文档顶部的距离，offset().left 获取距离文档左侧距离

  3.可以设置元素的偏移：offset({top:10,left:30});