前端学习华南理工大学无线电爱好者协会软件小组我爱编程

jQuery 学习笔记（慕课网）

2017-01-17  本文已影响84人  恰皮

1. 环境搭建

引入jQuery库：

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

可以在 bootstrapCDN 找到各种开源库的网址。

2. jQuery 对象

var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

3. jQuery 选择器

层级选择器 基本筛选选择器 内容筛选选择器 可见性筛选选择器 属性选择器 子元素选择器 表单元素选择器 表单对象属性选择器

4. jQuery .attr() 和 .removeAttr()

<input type="text" value="hiahia" />
<script type="text/javascript">
        $("input").attr('value',function(i, val){
            return ' 通过function设置 ' + val    //val 是原来的旧 value，新值为“通过 function设置 hiahia ”
        })
 </script>
.attr({ 属性名一:"属性值一",属性名二:"属性值二",属性名三:"属性值三" });

5. jQuery .html()

<script type="text/javascript">
        //通过 .text() 的回调，获取原本的内容，修改，在重新赋值
        $(".left a:first").text(function(index,text){
            return ' 增加新的文本内容 ' + text  //text 是旧的 text
        })
    </script>

6. jQuery .val()

7. jQuery .addClass()

8.jQuery .removeClass()

<script type="text/javascript"> 
        $('.right > div:first').removeClass(function(index,className){
            //className = aa bb imoocClass
            //把div的className赋给下一个兄弟元素div上作为它的class
            $(this).next().addClass(className);
            //删除自己本身的imoocClass
            return 'imoocClass';
        })
    </script>

9. jQuery .toggleClass()

10. jQuery .css()

<script type="text/javascript">
        //获取尺寸，传入CSS属性组成的一个数组
        //{width: "60px", height: "60px"}   
        var value = $('.first').css(['width','height']);
        //因为获取的是一个对象，取到对应的值
        $('p:eq(2)').text( 'widht:' + value.width +  ' height:' +value.height )
    </script>

<script type="text/javascript">
        //获取到指定元素的宽度，在回调返回宽度值
        //通过处理这个value，重新设置新的宽度
        $('.sixth').css("width",function(index,value){//value是原来的css属性值，即此处是width的值
            value=value.split('px');//将width的值以px为界分割成一个数组，数组内的元素是字符串
            return(Number(value[0])+50)+value[1];//value[0]是原来的width的值，是字符串，所以要转化为number ，value[1]是单位“px”
            })
    </script>

<script type="text/javascript">
        //合并设置,通过对象传设置多个样式
        $('.seventh').css({
         'font-size':"15px",
         "background-color":"#40E",
         "border":"1px solid red"
        })
    </script>

11. jQuery 创建、替换、删除节点

$(A).wrap(function() {
     return '<div></div>';  //给A包裹一层div（添加父元素）
})

<p>A</p>
<p>B</p>
......
$('p').wrapAll('<div></div>');
......
result:
<div>
    <p>A</p>
    <p>B</p>
</div>

<p>A</p>
<p>B</p>
......
$('p').wrapAll(function() {
    return '<div></div>';
});
......
<div>
    <p>A</p>
</div>
<div>
    <p>B</p>
</div>

$(A).each(function(index,element) {
$(this).css('color','red');
//index 是当前循环元素的索引
//element是对应的循环元素
//this指向当前对应的循环元素
})

12. jQuery 事件

12.1 click() 和 dbclick()

eg:
$("button").click(function(e) { alert(this); });
this指向绑定事件的元素 
$("#test").click(123, function(e) {
    //e.data=>123;
}

12.2 鼠标事件

12.3 表单事件

12.4 键盘事件

12.5 事件绑定 on

$(selector).on('click',function() { });

$(selector).on('mouseover mouseout',function() { });

$(selector).on({
mouseover:function() { },
mouseout:function() { }
})

function greet(event) {
    alert(event.data.name);
}
$(selector).on("click",{
    name:"chendahong"
},greet);

12.6 事件卸载off

12.7 事件对象

$(selector).on("click",function(event) {
    //event 是事件对象
    //event.target 是当前触发事件的元素
}

13. jQuery 动画

13.1 元素隐藏显示（display:none 和 display:block）

$(selector).hide({
duration:3000, //3000ms
complete:function() { } //动画完成时执行的函数
})

- ``$(selector).show(数值)`` 数值：动画执行时间（毫秒）
- ``$(selector).toggle(数值)`` 元素原来隐藏，则显示；元素原来显示，则隐藏
- ```
$(selector).toggle({
    duration:3000, //3000ms
    complete:function() { } //动画完成时执行的函数
})

$(selector).animate({
properties1://要改变的属性值一
properties2://要改变的属性值二
},[duration],[fn]); //duration:动画执行时间，fn:动画执行完毕的回调函数

14. jQuery的一些方法

上一篇 下一篇

猜你喜欢

热点阅读