前端学习——jQuery基础

一、引入jQuery的js文件

此处是下载好的jquery的js文件，也可以引入cdn。

二、jQuery的入口函数

三、DOM对象和jQuery对象

//建一个盒子
    

在浏览器中查看：

 

由此可知，DOM对象可以使用原生的js属性及方法，jQuery对象只能使用jQuery方法 。

四、DOM对象和jQuery对象的转换 

1、DOM对象转换成jQuery对象

2、jQuery对象转换成DOM对象

格式为$('div')[index]，其中index为索引号，如上我只创建一个盒子所以索引号为0

五、jQuery选择器

        $('选择器');//直接写css选择器即可

六、jQuery隐式迭代

jQuery会把四个盒子的背景颜色都变为粉色，这就是隐式迭代（把匹配的元素遍历循环，添加css样式）。

七、jQuery筛选选择器

    

        
1
        
2
        
3
        
4
    
    

        
1
        
2
        
3
        
4
    
    

 

八、jQuery筛选方法 

 九、jQuery排他思想和链式编程

jQuery的排他思想主要利用jQuery的隐式迭代实现。

        $(function() {
            $('button').click(function() {
                $(this).css('color','red');
                $(this).siblings().css('color','black');
            })
        })

链式编程可以将上面代码简化：

        $(function () {
            $('button').click(function(){
                $(this).css('color','red').siblings().css('color','black');  
            })
        })