jQuery库（1）

THER1881

已于 2022-07-14 11:42:45 修改

阅读量1k

点赞数

文章标签： jquery javascript 前端

于 2022-07-14 11:41:21 首次发布

本文链接：https://blog.csdn.net/thwr1881/article/details/125637289

版权

本文详细介绍了jQuery库的基础知识，包括jQuery的定义、设计理念及使用方法。重点讲解了jQuery的选择器，如id、类、标签选择器及过滤选择器，并阐述了如何操作元素的属性和样式，包括读取、修改属性，添加和删除class，以及通过css函数调整样式。同时，还涵盖了获取和设置元素宽度、高度、HTML内容以及input的value值的方法。

摘要由CSDN通过智能技术生成

一、jQuery库

1、什么是jQuery库

  是JavaScript中的库。

2、设计理念

“写得少，做的多”

3、使用方法

3.1、在页面中导入jQuery.js文件

<script type="text/javascript" src="./jquery-3.4.1.js"></script>

3.2、在script标签当中编写jquery程序

‘$’:是jQuery的全局对象，代表的是jQuery

//简写写法：
'$(function(){  //jquery的入口函数
            jquery
        })'

  //完整写法：

       $(documen).ready(function(){
           jquery
       })

4、jQuery的基本选择器

4.1、id选择器：#id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
     <button id="hide">隐藏</button> 
    <br>
    <p id="p1">西安</p>
    <script>
      $(function(){
            $('#hide').bind('click',function(){
                alert('你单击了按钮')
            })

            //修改p1的颜色
            $('#p1').css('backgroundColor','red')

                }) 
    </script>
</body>
</html>

在这里插入图片描述
4.2、类选择器：.class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
   <p class="pt">陕西</p>
    <p class="pt">陕西示范</p>  
    <script>
      $(function(){
              //修改class为pt的元素的文本颜色
            $('.pt').css('color','blue')
                }) 
    </script>
</body>
</html>

在这里插入图片描述

4.3、标签名选择器：标签名

    <p id="p1">西安</p> -
   <p class="pt">陕西</p>
    <p class="pt">陕西示范</p> 
  <!--    <hr> 
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> -->
    <script>
      $(function(){
            //将所有p标签的文本的字号设置为25
            $('p').css('fontSize','25px')
                }) 
    </script>

5、jQuery的基本过滤选择器

5.1、first：选择第一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
<!--       <button id="hide">隐藏</button> 
    <br> -->
    <p>西安</p> -
   <p >陕西</p>
    <p >陕西示范</p> 
    <script>
      $(function(){
            //将第一个p标签的背景色改为蓝色

            $('p:first').css('backgroundColor','blue')
            })
    </script>
</body>
</html>

在这里插入图片描述
5.2、last ；选择最后一个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <p>西安</p> 
   <p >陕西</p>
    <p>陕西示范</p> 
    <script>
      $(function(){
            //将最后一个p标签字体颜色改为红色
            $('p:last').css('color','red')
            })
      </script>
</body>
</html>

在这里插入图片描述

5.3、not(selector):不是指定的某个元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <p>西安</p> 
   <p class="pt">陕西</p>
    <p class="pt">陕西示范</p> 
    <script>
      $(function(){
           //将class属性不是pt属性的元素的字号变小
            $('p:not(.pt)').css('fontSize','12px')
            })  
       </script>
</body>
</html>

在这里插入图片描述

5.4、even：索引为偶数的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> 
    <script>
      $(function(){    
            //让索引为偶数的div的字体颜色为hong色
           $('div:even').css('color','red')
            })  
              
    </script>
</body>
</html>

在这里插入图片描述

5.5、odd：索引为奇数的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> 
    <script>
      $(function(){    
            //让索引为奇数的div的字体颜色为蓝色
           $('div:odd').css('color','red')
            })   
    </script>
</body>
</html>

在这里插入图片描述

5.6、eq（index）：索引等于index的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> 
    <script>
      $(function(){    
              //让索引等于2的div的字号为18px
             $('div:eq(2)').css('fontSize','30px')  
            })   
    </script>
</body>
</html>

在这里插入图片描述

5.7、gt(index):索引大于index的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> 
    <script>
      $(function(){    
              //让索引等于2的div的字号为18px
             $('div:gt(2)').css('fontSize','30px')  
            })   
    </script>
</body>
</html>

在这里插入图片描述

5.8、lt(index):索引小于index的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    <div>水浒</div>
    <div>三国</div>
    <div>西游</div>
    <div>红楼</div> 
    <script>
      $(function(){    
              //让索引等于2的div的字号为18px
             $('div:lt(2)').css('fontSize','30px')  
            })   
    </script>
</body>
</html>

在这里插入图片描述

6、属性选择器

6.1、[attribute]:拥有给定属性的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
            //选择将具有max属性的input文本设置为红色
            $('input[max]').css('color','red')

        })
     </script>
</body>
</html>

在这里插入图片描述

6.2、[attribute=value]:选取指定属性的值为value的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
           //将name属性值为username的inout的文本设置为蓝色
            $('input[name=username]').css('color','blue')

        })
     </script>
</body>
</html>

在这里插入图片描述
6.3、[attribute!=value]:选取指定属性的值为不等于value的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
            //将name属性值不为username的input的文本设置为粉色
            //$('input[name!=username]').css('color','pink')
        })
     </script>
</body>
</html>

在这里插入图片描述

6.4、[attribute^=value]：选取指定属性的值是以value开头的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
             //将name属性值开头为user开头的属性设置为25px
           $('input[name^=user]').css('fontSize','25px')

        })
     </script>
</body>
</html>

在这里插入图片描述

6.5、[attribute$=value]：选取指定属性的值是以value结尾的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
    //将name属性值开头为ress结尾的属性设置为30px
           $('input[name$=ress]').css('fontSize','30px')

        })
     </script>
</body>
</html>

在这里插入图片描述

6.6、[attribute*=value]：选取指定属性的值是含有value的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1.js"></script>
</head>
<body>
    用户名：<input type="text" name="username">
    <br><br>
    密&nbsp;&nbsp;&nbsp;码：<input type="password" >
     <br><br>
     年&nbsp;&nbsp;&nbsp;龄：<input type="number" max="120" min="0">
     <br><br>
     地&nbsp;&nbsp;&nbsp;址：<input type="text" name="address">
     <br><br>
    手机号：<input type="phone" name="userphone" id="">
    <br><br>
    QQ号：<input type="text" name="qqress" id="">
     <script>
        $(function(){
           //将type属性值中含有'word'的input的属性设置为40px
           $('input[type*=word]').css('fontSize','40px')

        })
     </script>
</body>
</html>

在这里插入图片描述

二、JQuery中操作元素的属性

1、读取属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p id="p1" name="pt">
        大唐芙蓉园
    </p>
  <script>
    $(function(){
        //读取属性的值
        let t = $('#p1').attr('name') //获取id为p1的元素的name属性值
        console.log(t) 
    })
  </script>
</body>
</html>

在这里插入图片描述

2、修改属性的值

2.1、attr(key,value) 参数key表示属性名，value表示属性的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <!-- <button id="del">删除图片</button> -->
    <br><br>
    <img src="" alt="">
  <script>
    $(function(){
        2、修改属性的值
        $('#btn').bind('click',function(){
            $('img').attr('src','./img/car.jpg') //给按钮btn绑定click事件
            }) 
    })
  </script>
</body>
</html>

在这里插入图片描述

2.2、attr({属性1；属性值，属性2；属性值2})：采用key：value方式设置属性值，可以设置多个属性，属性名需要用引号括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <!-- <button id="del">删除图片</button> -->
    <br><br>
    <img src="" alt="">
  <script>
    $(function(){
        2、修改属性的值
        $('#btn').bind('click',function(){
$('img').attr({src:'./img/car.jpg',width:'960px',heigth:'560px'})
     }) 
    })
  </script>
</body>
</html>

在这里插入图片描述

2.3、attr(key,fn) 参数key表示属性名，fn是回调函数，在函数中设置属性的值。属性名需要引号括起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <!-- <button id="del">删除图片</button> -->
    <br><br>
    <img src="" alt="">
  <script>
    $(function(){
        2、修改属性的值
        $('#btn').bind('click',function(){
            $('img').attr('src',function(){
              return './img/car.jpg'
            })
     }) 
    })
  </script>
</body>
</html>

在这里插入图片描述
3、删除元素： removeAttr(属性名)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <button id="btn">显示图片</button>
    <!-- <button id="del">删除图片</button> -->
    <br><br>
    <img src="" alt="">
  <script>
    $(function(){
 //2、修改属性的值
        $('#btn').bind('click',function(){
            $('img').attr('src',function(){
              return './img/car.jpg'
            })
             //删除图片
            $('#del').bind('click',function(){
              $('img').removeAttr('src') //将img的照片删除
            })
     }) 
    })
  </script>
</body>
</html>

显示照片：
在这里插入图片描述

删除照片：

在这里插入图片描述

三、jQuery操作元素的样式

1、通过class属性修改

1.1、给元素添加指定的类名(class)

addClass(‘类名’)

1.2、删除元素的class属性

removeClase(类名)

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<style>
    .ok{
        color: green;
    }
    .fail{
        color: red;
    }
</style>
<body>
    用户名：<input type="text" id="username"><span id="sp"></span>
    <br><br>
    密&nbsp;&nbsp;&nbsp;码: <input type="password" id="pwd">
    <br><br>
    <button id="btn">登录</button>

    <script>
        $(function(){
            $('#btn').bind('click',function(){
                if($('#username').val()==='abc'){
                    $('#sp').html('用户名合法')
                    $('#sp').removeClass('fail')
                    $('#sp').addClass('ok')
                }else{
                    $('#sp').html('用户名错误')
                    $('#sp').removeClass('ok')
                    $('#sp').addClass('fail')
                }
            })
        })
    </script>
</body>
</html>

在这里插入图片描述

2、通过css函数修改

2.1、获取css样式属性值

css(name) ；参数name表示样式属性名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;">西安</p>

    <p id="p2">北京</p>
        
     <script>
        $(function(){
           let k =  $('p').css('color')//获取css样式属性color的值
            console.log(k)
            })
     </script>
</body>
</html>

在这里插入图片描述

2.2、设置单个css样式属性

css(key,value) 参数key表示样式属性名，参数value表示样式属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;">西安</p>

    <p id="p2">北京</p>
        
     <script>
        $(function(){
$('#p2').css('color','blue') //设置id为p2的标签文本色为蓝色
})
     </script>
</body>
</html>

在这里插入图片描述

2.3、设置多个css样式

css({样式名：值，样式名2：值2})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;">西安</p>

    <p id="p2">北京</p>
        
     <script>
        $(function(){
$('#p2').css({'color':'blue','fontSize':'30px'})
})
     </script>
</body>
</html>

在这里插入图片描述

3、获取或设置页面元素的(标签)的宽度和高度

3.1、获取宽度在这里插入代码片

width()

3.2、设置宽度

width(val) //参数val表示宽度值

3.3、获取宽度

height()

3.4、设置高度

heigt(val) //参数val表示高度值

4、操作标签的HTML代码(就是操作标签的innerHTML属性值)

4.1、获取html的值

html()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;">西安</p>

    <p id="p2">北京</p>
        
     <script>
        $(function(){
            let str = $('#p2').html()
           console.log(str) 
        })
     </script>
</body>
</html>

在这里插入图片描述

4.2、设置html的值

html(val)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    <p style="color: red;">西安</p>

    <p id="p2">北京</p>
        
     <script>
        $(function(){
$('#p2').html('华北')
        })
     </script>
</body>
</html>

在这里插入图片描述

5、操作input的值(value属性)

5.1、获取Value的值

val()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    用户名: <input type="text">
    <input type="button" value="确定" >

    <script>
     $(function(){
        $('input[type=button]').bind('click',function(){
            alert($('input[type=text]').val())
        })
     })
    </script>
</body>
</html>

在这里插入图片描述

5.2、设置value值

val(Value)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../6.25/jquery-3.4.1.js"></script>
</head>
<body>
    用户名: <input type="text">
    <input type="button" value="确定" >

    <script>
     $(function(){
        $('input[type=button]').bind('click',function(){
            $('input[type=text]').val('西安')
        })
     })
    </script>
</body>
</html>