zoukankan      html  css  js  c++  java
  • 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="滑动" />

  • 相关阅读:
    吴裕雄--天生自然JAVA开发JSP-SERVLET学习笔记:解决启动TOMCAT服务器乱码问题
    吴裕雄--天生自然JAVA开发JSP-SERVLET学习笔记:配置TOMCAT服务器
    吴裕雄--天生自然JAVA开发JSP-SERVLET学习笔记:修改服务器端口
    吴裕雄--天生自然JAVA开发JSP-SERVLET学习笔记:解决服务端口8080被占用的问题
    css 背景色渐变---和背景色透明
    nodePPT 这可能是迄今为止最好的网页版PPT
    正则表达式匹配
    WdatePicker.js 日历点击时,触发自定义方法 ,可以调用自己的函数。
    html 实时监控发送数据
    [转]使用onclick跳转到其他页面/跳转到指定url
  • 原文地址:https://www.cnblogs.com/javawebsoa/p/3025991.html
Copyright © 2011-2022 走看看