jQuery学习(一)

jquery是一个javascript函数库,它提倡少写多做(write Less,Do More)。

jquery包含的主要功能:   

  1.  HTML元素选取
  2.  HTML元素操作
  3.  CSS操作
  4. HTML事件函数
  5. JavaScript特效和动画
  6. HTML DOM遍历和修改
  7. AJAX
  8. Utilities

一、 HTML元素选取

jquery有两种方式可以进入:可以执行多次,不会被覆盖,当Dom结构加载完成即可执行包裹代码

$(document).ready(function(){

    ......
})
等同于

$(function(){

    .......
})

javascript的入口函数:只能执行一次,下次执行会被覆盖,需要等整个页面资源加载完成才可以执行包裹代码。

window.onload = function(){

    .......
}

jquery获取dom元素是通过选择器进行获取的:

      获取id:$('#box')

      获取class:$('.box')

      获取tagname:$('div')

      通过属性获取:$('[href]')

二、html元素操作:

     1.获取html元素的内容

           text();输出元素的内容不包含元素

我是p标签

我是a标签
输出: 我是p标签 我是a标签

        html();输出标签加内容

我是p标签

我是a标签
输出:

我是p标签

我是a标签

     val();获取input框的value值

2.attr();获取元素的属性值

获取元素的属性attr()

我是p标签

我是a标签

3.添加元素:append() 和 prepend() 方法,after() 和 before() 方法

prepend,和before都是向前添加,但是prepend是添加到元素内部最前面,before是添加到元素外部前面

append和after都是向后追加,append是追加到元素内部最后,after是追加带元素外面的后面

append(),prepend(),after(),before()

我是p标签

我是a标签

4.删除元素remove,empty

删除元素empty,remove

我是p标签

我是a标签

5.addClass(),removeClass(),toggleClass()

删除元素empty,remove

我是p标签

我是a标签

三、css操作

1.css()方法改变样式

css方法

我是p标签

我是a标签

四、HTML事件函数

1.常见鼠标事件:

   click(),dbclick(),hover(),mouseenter(),mouseleave()

·                

鼠标点击事件

我是p标签

我是a标签
双击

2.常见的键盘事件keypress,keydown,keyup

                
		

3.表单事件  change,focus,blur,submit

                

表单事件focus,blur,change,submit

用户名:

密码:

4.文档窗口事件  resize,scroll

                

文档窗口事件resize,scoll

box

五、特效和动画

1.hide(),show(),toggle()显示隐藏

                

show,hide,toggle

我是p标签

我是a标签

2.淡入淡出:fadeIn(淡入),fadeOut(淡出),fadeToggle(淡入淡出切换),fadeTo(透明度由1变0)

调用格式fadeIn(淡入),fadeOut(淡出),fadeToggle(淡入淡出切换)是一样的

对象.fadeIn(speed,callback)参数可选

对象.fadeTo(speed,opacity,callback)   speed必选其他参数都是可选的

                

  3.滑进滑出:slideUp,slideDown,slideToggle

                

4.stop停止动画

                

5.自定义动画:使用animate里面的css属性时marginLeft使用驼峰命名,在写像素值px单位可不加jquery内部会自行处理。

animate( properties [, duration ] [, easing ] [, callback ] )第一个是必选项,其余都是可选

properties :是css属性键值对,

duration:包含slow,normal,fast或者自定义时间,

easing:包含swing和linear

callback:是回调函数完成动画后执行

                

 

你可能感兴趣的:(jQuery)