jquery介绍使用2

6）操作标签属性

1. attr(“attrName”,“value”)
   设置或读取标签属性
2. prop(“attrName”,“value”)
   设置或读取标签属性
   注意 :在设置或读取元素属性时,attr()和prop()基本没有区别;但是在读取或设置表单元素(按钮)的选中状态时,必须用prop()方法,attr()不会监听按钮选中状态的改变,只看标签属性checked是否书写
3. removeAttr(“attrName”)
   移除指定属性

7）操作标签样式

1. 为元素添加id/class属性,对应选择器样式
2. 针对类选择器,提供操作class属性值的方法

addClass("className")	//添加指定的类名
removeClass("className")//移除指定的类型,如果参数省略,表示清空class属性值
toggleClass("className")//结合用户行为,实现动态切换类名.如果当前元素存在指定类名,则移除;不存在则添加

3. 操作行内样式

css("属性名","属性值")  //设置行内样式
css(JavaScriptON对象)			 //设置一组CSS样式
/*
JavaScriptON对象:常用数据传输格式
语法 :
   {
    "width":"200px",
    "height":"200px",
    "color":"red"
   }
 */

8）元素的创建,添加,删除

1. 创建：使用$(“标签语法”)，返回创建好的元素

var div = $("<div></div>");	//创建元素
div.html("动态创建").attr("id","d1").css("color","red"); //链式调用，设置内容和属性
var h1 = $("<h1 id='d1'>一级标题</h1>");	//创建的同时设置内容，属性和样式

2. 作为子元素添加

$obj.append(newObj);	//在$obj的末尾添加子元素newObj
$obj.prepend(newObj);	//作为第一个子元素添加至$obj中

3. 作为兄弟元素添加

$obj.after(newObj);		//在$obj的后面添加兄弟元素
$obj.before(newObj);	//在$obj的前面添加兄弟元素

4. 移除元素

$obj.remove();	//移除$obj

9）动画效果

1. 显示和隐藏

    show(speed,callback)/hide(speed,callback)
   

   • speed 可选。规定元素从隐藏到完全可见的速度。默认为 “0”。
   • callback 可选。show 函数执行完之后，要执行的函数

2. 通过使用滑动下拉和上推效果，显示隐藏的被选元素（ 只针对块元素 ）

    slideDown(speed,callback)/slideUp(speed,callback)
   

3. 通过使用淡隐淡现方式显示效果，显示隐藏的被选元素

    fadeOut(speed,callback)/fadeIn(speed,callback)
   

4. 动画函数，可以实现自定义动画 animate 函数

   animate(styles,speed,callback)
   

   • styles 必需。规定产生动画效果的 CSS 样式和值
   • speed 可选。规定动画的速度。默认是 “normal”
   • callback 可选。show 函数执行完之后，要执行的函数

10）数据与对象遍历

1. $(selector).each() 方法规定为每个匹配元素规定运行的函数

   $(selector).each(function(index,element){})
   

   必需。为每个匹配元素规定运行的函数。

   • index - 选择器的 index 位置
   • element - 当前的元素

2. $.each()函数是框架提供的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理

   $.each(Object, function(index, data){});
   

   必需。为每个匹配元素规定运行的函数。

   • index - 选择器的 index 位置
   • data- 当前的数据

11）jQuery事件处理

1. 文档加载完毕
   原生JavaScript 方法：window.onload
   jQuery:

//语法一 
$(document).ready(function (){
  //文档加载完毕后执行
})
//语法二 
$().ready(function (){
  //文档加载完毕后执行
})
//语法三 
$(function(){
  //文档加载完毕后执行
})

区别：
原生onload事件不能重复书写，会产生覆盖问题；jquery中对事件做了优化,可以重复书写ready方法,依次执行

2. 事件绑定方式
   事件名称省略 on 前缀

  //on("事件名称"，function)
  $("div").on("click",function(){});//新版本使用的多些
  //bind("事件名称",function)
  $("div").bind("click",function(){});//1.6-1.8间的版本
  //事件名作为方法名
  $("div").click(function(){});  

3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。
   6-1.8间的版本
   //事件名作为方法名
   $(“div”).click(function(){});

3. this表示事件的触发对象，在jquery中可以使用，注意转换类型。this为原生对象只能使用原生的属性和方法，可以使用$(this)转换为jquery对象，使用jquery方法。