jQuery基础-入门知识

一．      Jquery是什么？

a)    Jquery是一个JavaScript库，也叫做DOM库，它封装一堆JavaScript函数，方便我们操作dom节点。

b)    好处：提高开发效率。

二．      使用jquery的步骤：

a)    引入jquery

b)    查找节点

    i. 通过id选择器

    ii. 元素选择器

    iii. Class选择器

    iv.  后代选择器

c)    为节点绑定事件

     i.  on函数来为节点绑定事件

     ii.   单个元素对象和类数组对象都不需要for循环，直接绑定事件

d)    改变节点的属性、内容

   i.  获取和设置元素属性：attr

        1.    Attr（属性名称）：attr中只有一个参数时，代表获取元素属性。

        2.    Attr(属性名称，属性值):attr中有两个参数，代表为元素设置属性。

    ii.   获取和设置css属性：

        1.    Css（样式名称）：后去样式值

        2.    Css（{“样式名称”:“样式值”}）：设置样式值

     iii.  获取和设置元素内容：

        1.    Html():没有参数，代表获取内容

        2.    Html(“哈哈哈”):一个参数，代表设置内容

      iv. 给元素添加动画

        1.    Animate

//简单动画,(selector).animate({styles},speed,easing,callback)

$( "#start"). on( "click", function(){

$( "#box"). animate({ "left" : "500px"}, 'slow')

            . animate({ "top" : "500px"}, 'slow'). animate({ "left" : "100px"}, 'slow')

            . animate({ "top" : "0px"}, 'slow');

});

e)    对节点进行增删改查

三．      Jquery中的ajax：

a)    ajax是什么?

    i. 浏览器与服务端进行数据交互的对象。

b)    Jquery中ajax？

    i.  Jquery中对象原生ajax进行封装，封装了以下函数：

1.    $.get：发送get请求

2.    $.post:发送post请求

3.    $.ajax:可配置的ajax函数，支持get请求、post请求、jsonp等等。

案例：获取豆瓣数据

    
    
    
    
    



    
头部
    
导航部分
    

        
正在热映
        

           
        
    
     
    

*{margin:0;padding:0;list-style: none;}
a{
    text-decoration: none;
}
button{
    outline: none;
    border: 0 none;
}
.header{
    background: #545652;
    height: 28px;
    color: #fff;
}
.nav{
    background: #f0f3f5;
    height: 115px;
    margin-bottom: 40px;
}
.wrap{
    width: 1040px;
    margin:0 auto;
    background: moccasin;
    min-height: 900px;
}
.title{
    font: 15px Arial, Helvetica, sans-serif;
    color: #072;
    margin: 0 0 12px 0;
    line-height: 150%;
    color: #111;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    margin-bottom: 18px;
}
.movie-box dl{
    float: left;
    width: 115px;
    height: 250px;
    margin-right: 25px;
}
.movie-box dt{
    width: 115px;
    height: 161px;
    margin-bottom: 17px;
}
.movie-box dt img{
    width: 100%;
    height: 100%;
    display: block;
}
.movie-box dd{
    width: 115px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}
.movie-box dd a{
    color: #333;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.movie-box dd button{
    display: block;
    margin: 10px auto 0;
    text-align: center;
    width: 90px;
    height: 24px;
    line-height: 24px;
    background-color: #268dcd;
    color: #fff;
    border-radius: 2px;
}

var url = 'https://api.douban.com/v2/movie/in_theaters';
$.ajax({
    url:url,
    type:'GET',
    dataType: 'JSONP',
    success: function (json) {
        $("#title").html(json.title);
        var str = '';
        for (var i = 0; i < 5; i++) {
            str += '
'
                + '
'
                + ''
                + '
'
                + '
'
                + '' + json.subjects[i].title + ''
                + '选座购票'
                + '
'
                + '
';
        }
        $("#movie-box").html(str);
    }
    });

四、jQuery常用方法

1、eq() --jQuery 遍历方法

eq() 方法返回带有被选元素的指定索引号的元素。

索引号从 0 开头，所以第一个元素的索引号是 0（不是 1）。

案例：选取第二个

元素（索引号为 1）：

$("p").eq(1).css("background-color","yellow");

2、on()-- jQuery 事件方法

$(selector).on(event,childSelector,data,function)

function

可选。规定当事件发生时运行的函数。

on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

案例：向

元素添加 click 事件处理程序：

$ ( document ) . ready ( function ( ) { $ ( " p " ) . on ( " click " , function ( ) { alert ( " 段落被点击了。 " ) ; } ) ; } ) ;

3、each()---jQuery 遍历方法

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

each() 方法为每个匹配元素规定要运行的函数

案例：输出每个

元素的文本：

$ ( " button " ) . click ( function ( ) { $ ( " li " ) . each ( function ( ) { alert ( $ ( this ) . text ( ) ) } ) ; } ) ;

4、off()-- jQuery 事件方法

off() 方法通常用于移除通过 on() 方法添加的事件处理程序。

案例：移除所有

元素上的 click 事件：

$("button").click(function(){
$("p").off("click");
});

5、val()-- jQuery HTML/CSS 方法

val() 方法返回或设置被选元素的 value 属性。

案例：设置 字段的值：

$ ( " button " ) . click ( function ( ) { $ ( " input:text " ) . val ( " Glenn Quagmire " ) ; } ) ;

五、jquery基础练习

1、选项卡

(1)jquery版本

    
    
    
    
    


    

        
按钮一
        
按钮二
        
按钮三
    
    

        
我是第一个盒子
        
我是第二个盒子
        
我是第三个盒子
    
    
    
    

    
    
    
    
    


    

        
按钮一
        
按钮二
        
按钮三
    
    

        
我是第一个盒子
        
我是第二个盒子
        
我是第三个盒子
    
    
    

（2）js版本

    
    
    
    
    



    

        
美食
        
娱乐
        
住宿
        
景点
    
    

        
美食
        
娱乐
        
住宿
        
景点
    

    

2、图片切换

3、网页换肤

    
    
    
    
    


    

		

			

				可以换肤的提交框：
				
				
			
			
输入姓名：
				
			
			
输入密码：
				
			
			
请您留言：
				
			
			

				
			
		
	
	
	

4、焦点事件

5、渲染后台数据

    
    
    
    
    



    

        

            

                
姓名
                
年龄
                
性别
            
        
        

            

                
小毛
                
32
                
男