JQuery使用方法及案例解析

最新推荐文章于 2023-08-12 10:47:33 发布

冷眸丶杵

最新推荐文章于 2023-08-12 10:47:33 发布

阅读量248

点赞数

分类专栏： jQuery 文章标签： JQuery使用方法

本文链接：https://blog.csdn.net/ly9457/article/details/82389178

版权

jQuery 专栏收录该内容

11 篇文章 1 订阅

订阅专栏

Jquery能做什么

访问和操作DOM元素控制页面样式对页面事件进行处理与Ajax技术完美结合设置

动态效果获取页面元素无需刷新页面获得服务器信息简化常见的javasrcipt任务

Jquery的优势
体积小，压缩后只有100KB左右 l强大的选择器出色的DOM封装可靠的事件处理机制
出色的浏览器兼容性使用隐式迭代简化编程丰富的插件支持

怎么通过Jquery设置样式

1）.通过$(“选择器”).css(“属性名”,”属性值”);

//这里的书写的属性名和css中书写的一致

2）.$(“选择器”).html():获取两个标签之间的html代码

3）.$(“选择器”).addClass(“属性值”)

可以动态的改变dom文档结构。进而设置样式。

案例详解：

<body>
    <form id="form1" runat="server">
        <div>
            <%-- 光棒效果 改变li的背景色--%>
            <ul>
                <li>看这呀！</li>
                <li>看着呢！</li>
            </ul>


            <%--文字显示--%>
            <p id="txt_hide">点击按钮，我会被隐藏哦~</p>
            <p id="txt_show">隐藏的我，被显示了，嘿嘿~</p>
            <input id="btn1" type="button" name="show" value="点击显示文字 " />
            <input id="btn2" type="button" name="hide" value="点击隐藏文字 " />


            <%--p标签添加动态效果--%>
            <p>哈哈哈</p>
            <asp:Button ID="Button1" runat="server" Text="取消事件" />


            <%--   页面无刷新 获取服务端信息--%>
            <input id="a" value="啦啦啦" />
            <button onclick="test()">按钮</button>


            <%--      DOM元素插入--%>
            <input type="button" value="添加" id="btu">
            <input type="button" value="指定添加b标签" id="btun">
            <div id="re">
                我是DIV
            </div>
            <p id="p">P标签</p>
            <p id="pi">b标签</p>

            <%-- 获取节点元素 追加信息--%>
            名字：<input id="name" type="text" /><br />
            评论：<input id="pinglun" type="text" /><br />
            <input id="Button1" type="button" value="提交" /><br />
            <table>
                <tr>
                    <td>姓名：</td>
                    <td>新增评论：</td>
                </tr>
            </table>


            <%--  jquery和ajax技术的结合--%>
            <div style="font-size: 12px; padding-left: 15px; padding-top: 15px;">
                当点击"测试"按钮时触发FunAjax函数
            <input type="button" id="btn_ok" value="测试" onclick="FunAjax()" />
                <span id="span_content">显示结果</span>
            </div>
        </div>
    </form>
</body>

使用JQuery：

<style type="text/css">
        #txt_show {
            display: none;
            color: #00C;
        }

        #txt_hide {
            display: block;
            color: #F30;
        }
    </style>
    <script src="Scripts/jquery-1.11.3.js"></script>
    <script>
        $(function () {
            //光棒效果 改变li的背景色
            $('li').mouseover(function () {
                $(this).css('background', 'red');
            }).mouseout(function () {
                $(this).css('background', '');
            })
        });

        //显示隐藏文字呀
        //$(function () {
        //    $("#btn1").click(function () {
        //        $('p:hidden').show();//显示文字
        //    })
        //    $("#btn2").click(function () {
        //        $('p:visible').hide();//隐藏文字
        //    })
        //});

        //设置动态效果呀
        //$(function () {
        //    //先给元素添加事件
        //    $("p").click(function () {
        //        $(this).slideToggle();
        //    })
        //    //再把元素的事件删除
        //    $("#Button1").click(function () {
        //        $("p").unbind();
        //    })
        //})

        //页面无刷新 获取服务端信息
        //function test() {
        //    var a = $("#a").val();
        //    alert(a);
        //}

        //DOM元素插入
        //$(function () {
        //    $('#btu').click(function(){
        //        //向匹配的元素内部追加内容。
        //        $('#re').appendTo('p');
        //    })
        //    $('#btun').click(function () {
        //        //把匹配的元素追加到另一个指定的元素集合中 追加到b标签
        //        $('#re').appendTo('#pi');
        //    })
        //})

        //获取节点元素 追加
        //$(function () {
        //    $("#Button1").bind("click", function () {
        //        var $name = $("#name").val();
        //        var $pinglun = $("#pinglun").val();
        //        var Name = $("table");
        //        Name.append("<tr><td >" + $name + "</td><td >" + $pinglun + "</td></tr>");
        //    })
        //})

        //jquery和ajax技术的结合
        //function FunAjax() {
        //    $.ajax({
        //        type: "POST",
        //        url: "jQueryAjaxTest.ashx",
        //        data: "begin=1&end=9",
        //        beforeSend: function () {
        //            $("#span_content").text("数据处理中...");
        //        },
        //        success: function (msg) {
        //            $("#span_content").text("两个数的和为： " + msg);
        //        }
        //    });
        //}

    </script>

使用ajax代码：

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            int iBegin = 0;
            int iEnd = 0;
            //接收参数 传过来的值1和9
            int.TryParse(context.Request["begin"].ToString(), out iBegin);
            int.TryParse(context.Request["end"].ToString(), out iEnd);

            Thread.Sleep(1000);   //为了能体现加载过程，在此我将程序延迟了一秒钟 引入using System.Threading;

            //计算并返回结果
            context.Response.Write((iBegin + iEnd).ToString());
        }

冷眸丶杵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery使用方法及案例解析

Jquery能做什么访问和操作DOM元素控制页面样式对页面事件进行处理与Ajax技术完美结合设置动态效果获取页面元素无需刷新页面获得服务器信息简化常见的javasrcipt任务 Jquery的优势体积小，压缩后只有100KB左右 l强大的选择器出色的DOM封装...
复制链接

扫一扫