jQuery 基础知识(三)

前面已经介绍HTML、CSS和javaScript，这三个前端语言，俗称前端三剑客。下面来学习一个javaScript简化并封装好的库——jQuery库。

01 - jQuery获取和设置元素属性

前面学习了jQuery获取和设置元素的内容，通过html()方法获取内容，通过append方法设置元素的内容。接下来设置元素的属性。

• prop方法的使用

 

之前使用css方法可以给标签设置样式属性，那么设置标签的其它属性可以使用prop方法了。
代码示例：

<style>
    .a01{
        color:red;
    }
</style>

<script>
    $(function(){
        var $a = $("#link01");
        var $input = $('#input01')

        // 获取元素属性
        var sId = $a.prop("id");
        alert(sId);

        // 设置元素属性
        $a.prop({"href":"http://www.baidu.com","title":'这是去到百度的链接',"class":"a01"});

        //  获取value属性
        // var sValue = $input.prop("value");
        // alert(sValue);

        // 获取value属性使用val()方法的简写方式
        var sValue = $input.val();
        alert(sValue);
        // 设置value值
        $input.val("222222");
    })
</script>

<a id="link01">这是一个链接</a>
<input type="text" id="input01" value="111111">

说明: 获取value属性和设置value属性还可以通过val方法来完成。

备注：

• 获取和设置元素属性的操作可以通过prop方法来完成

• 获取和设置元素的value属性可以通过val方法来完成，更加简单和方便

02 - javaScript创建对象

在编程的世界里，一切皆对象。javaScript也能创建对象。对象里可以创建方法。称之为对象的行为。对象里可以创建属性，称之为对象的成员。简言之，对象的成员叫属性，对象成员的行为叫方法。

• javaScript对象的介绍
  

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数等都可以认为是对象，此外，JavaScript 允许自定义对象，对象可以拥有属性和方法。

• javaScript创建对象的操作
  

创建自定义javascript对象有两种方式:

• 通过顶级Object类型来实例化一个对象

• 通过对象字面量创建一个对象

Object类创建对象的示例代码：

<script>
    var person = new Object();

    // 添加属性：
    person.name = 'tom';
    person.age = '25';

    // 添加方法：
    person.sayName = function(){
        alert(this.name);
    }

    // 调用属性和方法：
    alert(person.age);
    person.sayName();
</script>

对象字面量创建对象的示例代码:

<script>
    var person2 = {
        name:'Rose',
        age: 18,
        sayName:function(){
            alert('My name is' + this.name);
        }
    }

    // 调用属性和方法：
    alert(person2.age);
    person2.sayName();
</script>　

说明：

调用属性和方法的操作都是通过点语法的方式来完成，对象的创建推荐使用字面量方式，因为更加简单。

备注：

创建自定义javascript对象有两种方式:

• Object

• 字面量

03 - jQuery事件

jQuery 是为事件处理特别设计的，页面对不同访问者的响应叫做事件。

• jQuery常用事件

• click() 鼠标单击

• blur() 元素失去焦点

• focus() 元素获得焦点

• mouseover() 鼠标进入（进入子元素也触发）

• mouseout() 鼠标离开（离开子元素也触发）

• ready() DOM加载完成

示例代码:

<script>
    $(function(){
        var $li = $('.list li');
        var $button = $('#button1')
        var $text = $("#text1");
        var $div = $("#div1")

        //  鼠标点击
        $li.click(function(){             
            // this指的是当前发生事件的对象，但是它是一个原生js对象
            // this.style.background = 'red';

            // $(this) 指的是当前发生事件的jquery对象
            $(this).css({'background':'gold'});
            // 获取jquery对象的索引值,通过index() 方法
            alert($(this).index());
        });

        //  一般和按钮配合使用
        $button.click(function(){
            alert($text.val());
        });

        //  获取焦点
        $text.focus(function(){
            $(this).css({'background':'red'});

        });

        //  失去焦点
        $text.blur(function(){
            $(this).css({'background':'white'});

        });

        //  鼠标进入
        $div.mouseover(function(){
            $(this).css({'background':'gold'});

        });

        //  鼠标离开
        $div.mouseout(function() {
            $(this).css({'background':'white'});
        });
    });
</script>

<div id="div1">
    <ul class="list">
        <li>列表文字</li>
        <li>列表文字</li>
        <li>列表文字</li>
    </ul>

    <input type="text" id="text1">
    <input type="button" id="button1" value="点击">
</div>

 

说明：

• this指的是当前发生事件的对象，但是它是一个原生js对象

• $(this) 指的是当前发生事件的jquery对象

备注：

jQuery常用事件：

• click() 鼠标单击

• blur() 元素失去焦点

• focus() 元素获得焦点

• mouseover() 鼠标进入（进入子元素也触发）

• mouseout() 鼠标离开（离开子元素也触发）

• ready() DOM加载完成

• 知识点回顾
  

本节介绍了jQuery的获取和设置属性及属性值、javaScript创建对象和jQuery事件的使用。

1、jQuery获取属性和设置属性值可以通过prop方法，如果是value属性的话，也可以使用val()方法来获取。

2、javaScript创建对象有两种，一种是类创建对象，一种是字面量创建对象。获取对象可以使用js原生方法this，也可以使用jQuery的方法$(this)方法。

3、jQuery常用事件有6种，事件可以处理特别场景。

 

工欲善其事，必先利其器！