JQuery入门语法详解（一）

JQuery

语法

基础语法

• 美元符号定义

• 选择符(selector)查找元素

• action()执行操作

  e.g.

  • $(this).hide() 隐藏当前元素
  • $(“p.test”).hide() 隐藏class等于test的p标签元素

页面加载时执行的函数

• $(document).ready(function(){ })
• = $(function(){ })

JQuery选择器

• 元素选择器
• id选择器
• class选择器
• $("*")选择所有元素

JQuery事件

• mouseenter()/hover() 【mouseleave()】 有点像css里面的hover属性
• mousedown() 【mouseup()】 有点像html里面的onmouseover()【onmouseout()】
• focus()/blur() 聚焦/失焦函数

JQuery效果

1. 隐藏与显示

   • hide()与show()【带有speed的hide–>$(“div”).hide(1000,“linear”,function(){ })】
   • toggle()切换hide()和show()方法

2. 淡入与淡出

   • fadeIn() / fadeOut() 淡入/出隐藏元素【speed取值---->slow/fast/毫秒】
   • fadeToggle()切换fadeIn() / fadeOut()
   • fadeTo()切换元素的透明度-------$(“div”).fadeTo(“slow”,0.1)

3. 滑动

   • slideDown(speed,callback) / slideUp() 向下/上滑动元素
   • slideToggle() 切换上述两种方法

4. 动画与停止动画

   • animate()【e.g $(“div”).animate({left:‘250px’,opacity:‘0.1’},“slow”)】
     • 若定义相对于元素的当前值，则使用：height：‘+=150px’
   • stop()

5. Callback

   ​ JQuery函数中，speed或duration参数可以设置很多值，例如“slow”，“fast”，“normal”或者毫秒

6. 链

   ​ 可以在相同的元素上运行多条JQuery命令，会有先后顺序

   e.g. $(“p”).css(“color”,“red”).slideUp(“slow”).slideDown(“fast”)【可以换行缩进，JQ会抛掉多余的空格】

JQ捕获与设置

• text() 文本
• html() 包括代码
• val() 获取用户输入
• attr() 获取链接中href的值【$(“a”).attr(“href”,“http://www.baidu.com”)】
• *attr()提供回调函数进行更改

JQ添加/删除元素

• append() / prepend() 在被选元素后面 / 前面追加内容【追加的内容格式与原格式必须相同，比如说不可以在图片前面追加文字】
• after() / before() 元素外部添加内容【不限制格式】
• remove() 删除被选元素及其子元素，可添加内容删除指定元素
• empty() 删除被选元素的子元素

JQcss类

• addClass() 向被选元素添加一个或多个类
• removeClass() 从被选元素删除一个或多个类
• toggleClass() 从被选元素进行添加/删除类的切换操作
• css() 【e.g. $(“div”).css({“background-color”:“red”,“font-size”:“20px”})】