jquery 基础01

1.jquery是什么？

jQuery是一个轻量级的"写的少，做的多"的JavaScript函数库。[独立的javascript文件]

jQuery 是一个 JavaScript 函数库
jQuery 极大地简化了 JavaScript 编程
jQuery 很容易学习

jQuery库包含以下功能：

    1.HTML元素选取

    2.HTML元素操作

    3.CSS 操作

    4.HTML 事件函数

    5.JavaScript 特效和动画[元素的隐藏和显示]

    6.HTML DOM 遍历和修改

    7.AJAX请求【获取后台处理程序返回的数据值】高级操作

2. jquery页面初始化

javascript页面初始化函数

<script> 
window.onload = function () {
            alert('javascript 页面初始化');
        }

</script> 

jquery页面初始化函数

<script>
 $(function () {
            alert('导出jquery的函数库文件');     //导出jquery的函数库文件
        })

</script>

3. jquery基础语法：

基础语法： $(selector).action()

$(selector)---jquery 的元素选择器【选中需要被控制的html元素，并转换成jquery对象】

action()----具体的函数名称，需要什么功能，就写那个功能的函数名称

基础语法： jquery对象.函数名称()

jquery-1 $("#id")[jquery对象]

jquery-2 $("元素名称")[数组]

jquery-3 $(".class")[数组]

javascript 基础语法：

javascript-1.document.getElementBId("id")[dom对象]

javascript-2.document.getElementsTagName("元素名称")[数组]

javascript-3.document.getElementsClassName("class")[数组]

<p id="p1">测试$("#id")</p>
    <p>测试 $("元素名称")</p>
    <p class="p2">测试 $(".class")</p>

 $(function () {
            $("#p1").css('color', 'red');
            $(".p2").css('color', 'blue');
            $('p').css('font-size', '30px');   //所以p段落字体都放大了

})

 4. Jquery对象与javascript对象的转换

1. javascript对象---->Jquery对象     $(javascript 对象)

var pdao = document.getElementById('p1');
            // alert(pdao);  //[object HTMLParagraphElement]
            // $(javascript 对象)；
            var pjquery = $(pdao)
            // alert(pjquery);  //[object Object]

2.Jquery对象------>javascript对象      jquery对象.get()  

 var pjquery = $('#p1')
            // alert(pjquery); //[object Object]
            var pdao = pjquery.get()
            alert(pdao);        //[object HTMLParagraphElement]

5. jQuery获取/修改html元素的值

5.1jQuery获取html元素的值

javascript获取html元素的值

dom对象.innerText[不会得到包含其中的html标记]

dom对象.innerHTML[会得到包含其中的html标记]

dom对象.value[得到表单元素的值]

jQuery获取html元素的值

jquery对象.text()[不会得到包含其中的html标记]

jquery对象.html()[会得到包含其中的html标记]

jQuery对象.val()[得到表单元素的值]

 <p id="p1">测试 <span>jquery</span> 获取html元素的值</p>
    <input type="text" value="表单元素值">

jquery对象.text()[不会得到包含其中的html标记]
alert($('#p1').text());  //测试 jquery 获取html元素的值

jquery对象.html()[会得到包含其中的html标记]
alert($('#p1').html());   //测试 <span>jquery</span> 获取html元素的值

jQuery对象.val()[得到表单元素的值
alert($(':text').val());      //表单元素值

5.2jQuery修改html元素的值

 javascript修改html元素的值

dom对象.innerText="数据值"[不会显示包含其中的html标记]

dom对象.innerHTML="数据值"[会显示包含其中的html标记]

dom对象.value="数据值" [设置表单元素的值]

jQuery修改html元素的值

jQuery对象.text("数据值")[不会显示包含其中的html标记]

jQuery对象.html("数据值")[会显示包含其中的html标记]

jQuery对象.val("数据值")[修改表单元素的值]

<p id="p1">测试 <span>jquery</span> 获取html元素的值</p>
    <input type="text" value="表单元素值">

jQuery对象.text("数据值")[不会显示包含其中的html标记]
$('#p1').text('测试<a href="#">jquery</a>的修改html元素的值')  
//测试<a href="#">jquery</a>的修改html元素的值

jQuery对象.html("数据值")[会显示包含其中的html标记]
$('#p1').html('测试<a href="#">jquery</a>的修改html元素的值')    
//测试jquery的修改html元素的值

jQuery对象.val("数据值")[修改表单元素的值]
 $(':text').val("input type='text'表单元素值");

6. jQuery - 添加元素

append() - 在被选中元素中插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

    <div id="div1" style="width: 300px;height: 300px;background-color: red;"> </div>

<script>
        $(function () {
            // append() - 在被选中元素中插入内容
             $('#div1').append('<img src="imgs/avatar3.png">')
             $('#div1').append('<h3>h3标题</h3>')

            //after() - 在被选元素之后插入内容
            $('#div1').after('<h3>在div之后插入内容</h3>')

            //before() - 在被选元素之前插入内容
            $('#div1').before('<h3>在div之前插入内容</h3>')

        })
    </script>

7. jQuery - 删除元素

remove() - 删除被选元素（及其子元素）【有过滤功能】

empty() - 删除从被选元素中的子元素

    <div id="div1" style="width: 300px;height: 300px;background-color: red;">
        <div id="div2" style="width: 250px;height: 250px;background-color:blue;">
            <img src="imgs/avatar2.png">
        </div>
        <h3>我是id="div1"的子元素</h3>

<script>
        $(function () {
            // remove() - 删除被选元素（及其子元素）【有过滤功能】
           $('#div1').remove()

            // empty() - 删除从被选元素中的子元素
            $('#div1').empty()

        })
    </script>

8. jquery的CSS 操作

8.1 jquery得到css样式值

javascript得到css样式值：

dom对象.style.css属性名称

jquery得到css样式值：

jquery对象.css(属性名称)

<div id="div1"></div>

#div1 {
            width: 300px;
            height: 300px;
            background-color: red;
        } 

jquery得到css样式值----jquery对象.css(属性名称)
alert($('#div1').css('width'));   //300px

8.2 jquery修改css样式值

javascript修改css样式值：

dom对象.style.css属性名称="属性值"

jquery修改css样式值：

jquery对象.css(属性名称,属性值)----修改一个css属性值

jquery对象.css({属性名称:属性值,属性名称:属性值})----修改多个css属性值

#div1 {
            width: 300px;
            height: 300px;
            background-color: red;
        } 

  jquery对象.css(属性名称,属性值)----修改一个css属性值
$('#div1').css('background-color', 'blue');

jquery对象.css({属性名称:属性值,属性名称:属性值})----修改多个css属性值
$('#div1').css({ 'width': '200px', 'height': '200px', 'background-color': 'yellow' })

8.3为元素添加已经存在的样式

jquery对象.addClass("class属性值")----为有class属性值的html元素设置style中的样式

jquery对象.removeClass() - 从被选元素

jquery对象.toggleClass() - 对被选元素进行添加/删除类的切换操作

<input id="but1" type="button" value="addClass">
    <input id="but2" type="button" value="removeClass">
    <input id="but3" type="button" value="toggleClass">
    <div id="div1"></div>

   .mydiv {
            width: 300px;
            height: 300px;
            background-color: red;
        }

$(function () {

 // 得到按钮的对象
            $('#but1').click(function () {
                //jquery对象.addClass("class属性值")----为有class属性值的html元素设置style中的样式
                $('#div1').addClass('mydiv');
            })

            $('#but2').click(function () {
                // jquery对象.removeClass() - 从被选元素删除一个或多个类
                $('#div1').removeClass('mydiv');
            })

            $('#but3').click(function () {
                // jquery对象.toggleClass() - 对被选元素进行添加/删除类的切换操作
                $('#div1').toggleClass('mydiv');

            })

        })

9. 常用的 jQuery 事件方法

1、页面初始化事件--$(document).ready(function)

$(document).ready(function(){
             alert("页面初始化事件");
         })

2. click(function) 方法是当按钮点击事件被触发时会调用一个函数

    <input id="but1" type="button" value="按钮">

 $(function () {
            // alert("简化以后页面初始化事件");

            //按钮点击事件
            $('#but1').click(function () {
                alert('按钮点击事件');  //按钮点击事件
            })
         })

3. dblclick(function)双击元素时，会发生 dblclick 事件。 

    <input id="but2" type="button" value="双击按钮">

 $(function () {
 //双击按钮
            $('#but2').dblclick(function () {
                alert('点击按钮双击事件')  //点击按钮双击事件
            })



        })

4.mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。

    <h2 id="h2">测试鼠标进入和移出事件</h2>

$(function () {
            //mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件
            $('#h2').mouseenter(function () {
                // alert('当鼠标指针穿过元素时，会发生 mouseenter 事件');
            })
})

 5.mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。

    <h2 id="h2">测试鼠标进入和移出事件</h2>

$(function () {
//mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件
            $('#h2').mouseleave(function () {
                // alert('当鼠标指针离开元素时，会发生 mouseleave 事件');
            })
})

6.hover(function)方法用于模拟光标悬停事件。

    <a id='a1' href="#">测试光标悬停事件</a>

 $(function () {
            //.hover(function)方法用于模拟光标悬停事件
            $('#a1').hover(function () {
                // alert('hover(function)方法用于模拟光标悬停事件');
            })
   })

7.focus(function)当元素获得焦点时，发生 focus 事件。

8.blur(function)当元素失去焦点时，发生 blur 事件。

    <input id='input1' type="text" value='测试获得焦点和失去焦点事件'>

   $(function () {
// focus(function)当元素获得焦点时，发生 focus 事件。
            // blur(function)当元素失去焦点时，发生 blur 事件。
            $('#input1').focus(function () {
                $(this).val("background-color");
            })
            $('#input1').blur(function () {   //this???
                alert($(this).val());
            })

        })

 10. 元素的隐藏和显示动画【就是元素的隐藏和显示】

第一组：

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

    <input id="but1" type="button" value="隐藏"> <!-- 成功隐藏后会变成显示 --> <br>
    <img id="img1" src="imgs/avatar2.png">

 $(function () {
            $('#but1').click(function () {
                //得到按钮上的文字
                var butvalue = $('#but1').val();
                if (butvalue == "隐藏") {
                    // hide([毫秒数],[success-function]) 隐藏元素
                    $('#img1').hide(5000, function () {
                        $('#but1').val('显示');

                    })

                } else {
                    // show([毫秒数],[success-function]) 显示元素
                    $('#img1').show(5000, function () {
                        $('#img1').css({ 'border': '10px solid black' })
                        $('#but1').val('隐藏');
                    })
                }

            })
  })

第二组：

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

    <input id="but2" type="button" value="隐藏"><br>
    <img id="img2" src="imgs/avatar2.png">

 $(function () {
            $('#but2').click(function () {
                //得到按钮上的文字
                var butvalue = $('#but2').val();
                if (butvalue == "隐藏") {
                    //fadeOut([毫秒数],[success-function]) 隐藏元素
                    $('#img2').fadeOut(5000, function () {
                        $('#but2').val('显示');

                    });

                } else {
                    // fadeIn([毫秒数],[success-function]) 显示元素
                    $('#img2').fadeIn(1000, function () {
                        $('#img2').css({ 'border': '10px solid red' })
                        $('#but2').val('隐藏');
                    });
                }
            })
  })

第三组：

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

    <input id="but3" type="button" value="隐藏"><br>
    <img id="img3" src="imgs/avatar2.png">

$(function () {  
$('#but3').click(function () {
                //得到按钮上的文字
                var butvalue = $('#but3').val()
                if (butvalue == '隐藏') {
                    //slideUp([毫秒数],[success-function]) 隐藏元素
                    $('#img3').slideUp(5000, function () {
                        $('#but3').val('显示');
                    })
                } else {
                    // slideDown([毫秒数],[success-function]) 显示元素
                    $('#img3').slideDown(5000, function () {
                        $('#img3').css({ 'border': '10px double yellow' })
                        $('#but3').val('隐藏');
                    })
                }

            })

        })

11. jQuery 效果- 动画

$(selector).animate({params},speed,callback);

{params}---设置修改样式

speed---设置执行时间

callback--函数，动画执行完成以后的动作

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

    <input id="but1" type="button" value="开始动画">
    <input id="but2" type="button" value="结束动画"> <br>
    <img id="img1" src="imgs/avatar2.png">

<style>
        #img1 {
            position: relative;
            padding-top: 0%;
            padding-left: 0%;
        }
    </style>

<script>
        $(function () {
            $('#but1').click(function () {
                // $(selector).animate({params},speed,callback);   
                $('#img1').animate({ 'padding-top': '200px', 'padding-left': '200px' },
                    5000,
                    function () {
                        $('#img1').css({ 'border': '10px solid red' })
                    }

                )
            })
            $('#but2').click(function () {
                // jQuery stop() 方法用于停止动画或效果，在它们完成之前
                $('#img1').stop();
            })

        })
</script>

12. jQuery each() 方法

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

$(selector)---数组

each函数中的function的：

参数1-index--被遍历出的每一个元素在数组中的位置[下标]

参数2-element--被遍历出的每一个元素具体元素【DOM对象】

each函数中的function中没有element时，可以被this代替

    <p>测试用的p元素1</p>
    <p>测试用的p元素2</p>
    <p>测试用的p元素3</p>
    <p>测试用的p元素4</p>

 <script>
        $(function () {
            var parray = $('p');
            parray.each(function (index, element) {
                var size = index * 10 + 20;
                $(element).css('font-size', size + 'px');
            })
        })

    </script>