JQuery学习(1)

定义

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

美元符号定义 jQuery

选择符（selector）“查询”和“查找” HTML 元素

jQuery 的 action() 执行对元素的操作

 

使用

1.获取img的src属性

<script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>  //调用jquery文件

<script type="text/javascript">
        function aaa() {
            $(document).ready(function () {
                alert($('#img1').attr('src'));  
            })
        }
    </script>

 <img id="img1" src="风景/29b56ef1ecac0a2e23fe73abb8457ed9.jpg" />
    <input id="Button1" type="button" value="单机" onclick="aaa()" />

2.各种效果

<style type="text/css">
     .aaa
     {
         height:300px;
         position:absolute;
         }
    </style>
    <script src="jquery/jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function setyangshi() {
            $(function () {
                $('#img1').css('width', '200px');
                $('#img1').addClass('aaa');
            })
        }

        $(function () {
            $('#Button1').click(function () {       //手动给button添加click方法
                $('#img1').show(2000);              //显示
            })
            $('#Button2').click(function () {
                $('#img1').hide(2000);                //收缩隐藏
            })
            $('#Button3').click(function () {
                $('#img1').fadeIn(2000);            //淡入
            })
            $('#Button4').click(function () {
                $('#img1').fadeOut(2000);      //淡出
            })
            $('#Button6').click(function () {
                $('#img1').animate({ left: '250px' }, 5000);   //滑动效果必须要是图片有position:absolute
            })
        })
    </script>

 <img alt="" id="img1" src="风景/cda8a8f5b72e165c153fd396db02ab64.jpg" />
    <input id="Button5" type="button" value="设置样式" onclick="setyangshi()" />
    <input id="Button1" type="button" value="显示" />
    <input id="Button2" type="button" value="收缩" />
    <input id="Button3" type="button" value="淡入" />
    <input id="Button4" type="button" value="淡出" />  
    <input id="Button6" type="button" value="滑动" />