jQuery中的一些基本操作总结

前言：

• jQuery，顾名思义，也就是 JavaScript 和查询(Query)，它就是辅助 JavaScript 开发的 js 类库。
• $ 是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数
• jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数。
• jQuery 对象不能使用 DOM 对象的属性和方法，DOM 对象也不能使用 jQuery 对象的属性和方法。
• dom 对象转化为 jQuery 对象：
  $( DOM 对象 ) 就可以转换成为 jQuery 对象
• jQuery 对象转为 dom 对象
  jQuery 对象[下标]取出相应的 DOM 对象

一.DOM操作

1.DOM属性操作

• html() 它可以设置和获取起始标签和结束标签中的内容。 跟 DOM 属性 innerHTML 一样。
• text() 它可以设置和获取起始标签和结束标签中的文本。 跟 DOM 属性 innerText 一样。
• val() 它可以设置和获取表单项的 value 属性值。 跟 DOM 属性 value 一样。

示例：

a.html()       //取出a的html值  
a.html(val)   //让a的html值变为val
a.text()      //取出a的text值  
a.text(val)   //让a的文本值变为val
a.val()        //取出a的val值（input） 
a.val(v)        //设置a的value值为v 
//val实战举例：
// 操作单选
$(":radio").val(["radio2"]);
// 批量操作多选框的选中状态 
$(":checkbox").val(["checkbox3","checkbox2"]); 
// 操作单选的下拉框选中状态 
$("#single").val(["sin2"]);
// 批量操作多选的下拉框选中状态 
$("#multiple").val(["mul2","mul3","mul4"]);

示例：

a.attr('name') //取出a的name值
a.attr("name","username") //把a的name值设置为username
a.attr("yushiwen","123")  //把a的自定义属性yushiwen的值设置为123
a.removeAttr('class')    //移除a的class属性
a.prop('id')  //取出a的id值
a.prop('id',"wh")  //设置a的id值为wh
a.removeProp('class')  //移除a的class属性

2. attr()与prop()的区别：

当取得checked属性的值时，如果checked属性设置了，如下：


attr()会返回checked，prop()会返回true，如下：


当取得checked属性的值时，如果checked属性没有设置，如下：

attr()会返回undefined，prop()会返回false，如下：


undefined到底是什么呢，官方觉得返回undefined是一个错误，所以我们在操作checked属性时，应该使用prop()方法。
同理readOnly、selected、disabled 等等属性与checked是一样的，对它们进行操作时应该使用prop()方法。

3.DOM 的增删改

内部插入：

外部插入:

替换:

删除:

二.CSS 样式操作

示例：

a.css('color') //取出a元素的color
a.css('color',"red") //设置a元素的color为red
//实战演示
//addClass() - 向被选元素添加一个或多个类，下述示例添加多个
$('div:first').addClass("redDiv blackDiv");
//removeClass() - 从被选元素删除一个或多个类 ，下述示例删除多个，也就是所有class
$('div:first').removeClass();
//toggleClass() - 对被选元素进行添加/删除类的切换操作 ,切换就是如果具有该类那么删除，如果没有那么添加上
$('div:first').toggleClass("redDiv");
//offset() - 返回第一个匹配元素相对于文档的位置。
var os = $('div:first').offset();
//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
alert("顶边距："+os.top+" 左边距："+os.left);

//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
//offset({ top: 10, left: 30 });
$('div:first').offset({
      
     top:50,
     left:60
 }); 

三.jQuery 效果

1.基本效果

2.滑动效果

3.淡入淡出效果

4.上述三组方法的共同点

以上方法都可以添加参数。

四.$( function(){} )和window.onload = function(){}的区别

1.他们分别是在什么时候触发?

2.他们触发的顺序?

3.他们执行的次数?

4.代码演示：

代码：

<script type="text/javascript">

    $(function(){
       
        console.log(1);
    });

    $(document).ready(function () {
       
        console.log(2);
    });

    jQuery(function () {
       
        console.log(3);
    });

    window.$(function () {
       
        console.log(4);
    });

    window.jQuery(function () {
       
        console.log(5);
    });

    window.onload= function () {
       
        console.log(6);
    };

    onload = function (ev) {
       
        console.log(7);
    };


</script>

输出结果：


五.jQuery 事件操作

示例：

$("h5").click(function () {
         // 传function是绑定事件
    alert('h5单击事件 == click方法绑定')
});
$("h5").click(); // 不传function是触发事件
//鼠标移入
$("h5").mouseover(function () {
        
    console.log("你进来了")
});
//鼠标移出
$("h5").mouseout(function () {
        
console.log("你出去了")
});
// 给元素绑定事件，绑定事件可以链式操作
// jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
$(".head").click(function(){
        
    $(".content").toggle();
}).mouseover(function(){
        
    $(".content").toggle();
}); 
//jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
//使用bind()绑定多个事件 type可以接受多个事件类型，使用空格分割多个事件
$(".head").bind("click mouseover",function(){
        
    $(".content").toggle();
});
//one()只绑定一次,绑定的事件只会发生一次 one(type,[data],fn)函数把元素和事件绑定起来
//type表示要绑定的事件 [data]表示传入的数据 fn表示事件的处理方法
$(".head").one("click mouseover",function(){
        
    $(".content").toggle();
}); 
//live方法会为现在及以后添加的元素都绑定上相应的事件
$(".head").live("click",function(){
        
    $(".content").toggle();
});
$("#panel").before("<h5 class='head'>什么是jQuery?</h5>"); //之后动态添加元素

六.事件冒泡与javaScript 事件对象

1.事件的冒泡

2.javaScript 事件对象

2.1原生javascript获取事件对象

//原生javascript获取 事件对象 window.onload = function () {
          document.getElementById("areaDiv").onclick = function (event) {
          console.log(event); } } 

输出结果：


2.2jQuery 代码获取事件对象

//JQuery代码获取事件对象 $(function () {
           $("#areaDiv").click(function (event) {
           console.log(event); }); }); 


可以看到两者内容是差不多的，只不过jQuery 代码获取事件对象把原生javascript获取事件对象包装了一下。

2.3事件对象event举例

使用 bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件

$("#areaDiv").bind("mouseover mouseout",function (event){
            if (event.type == "mouseover") {
            console.log("鼠标移入"); } else if (event.type == "mouseout") {
            console.log("鼠标移出"); } });