对于熟悉前端开发的小伙伴，相信对于Jquery一定不陌生，相对于JavaScript的繁琐，Jquery更加的简洁，当然简洁不意味着简单，我们可以使用Jquery完成我们想要实现全部功能，这里为小白们分享一下关于Jquery的事件和文档操作，便于小白们快速上手。

一、事件操作：

<html>

    <head>

        <title>Jquery事件操作测试</title>

        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

        <style>

            .ul{min-width:300px;height:25px;}

            .ul2{margin-top:20px;}

            .ul li{float:left;min-width:50px;height:25px;line-height:25px;margin-left:10px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}

        </style>

    </head>

    <body>

        <ul class="ul ul1" id="ul1">

            <li class="li li1" id="li1">第一项</li>

            <li class="li li2" id="li2">第二项</li>

            <li class="li li3" id="li3">第三项</li>

            <li class="li li4" id="li4">第四项</li>

            <li class="li li5" id="li5">第五项</li>

        </ul>

        <ul class="ul ul2" id="ul2">

            <li class="li li1" id="li1">第一项<span>span</span></li>

            <li class="li li2" id="li2">第二项</li>

            <li class="li li3" id="li3">第三项</li>

            <li class="li li4" id="li4">第四项</li>

            <li class="li li5" id="li5">第五项</li>

        </ul>

        <input type='text' value="text" id="text">

        <input type='password' value="password" disabled="disabled">

        <input type='number' value="number">

        <input type='radio' value="radio">radio

        <input type='checkbox' value="checkbox">checkbox

    </body>

    <script>

        var jq = jQuery.noConflict();//jQuery 名称冲突

        jq(document).ready(function(){

            alert("页面加载完成");

        });

        jq(".ul li").click(function(){

            //alert(jq(this).text());//不带格式输出

            //alert(jq(this).html());//带格式输出

        });

        jq("#ul1 li").click(function(){

            //alert(jq(this).attr("class"));

            if(jq(this).hasClass("li1")){//元素是否包含指定的class

                alert(true);

            }else{

                alert(false);

            }

        });

        jq("#ul1 li.li1").click(function(){

            alert("#ul1 li.li1-----------" + jq(this).attr("class"));

        });

        jq(".ul1 li:first").click(function(){

            alert(".ul1 li:first-----------" + jq(this).attr("class"));

        });

        jq(".ul1 li:last").click(function(){

            alert(".ul1 li:last-----------" + jq(this).attr("class"));

        });

        jq(".ul1 li:even").click(function(){

            alert(".ul1 li:even-----------" + jq(this).attr("class"));

        });

        jq(".ul1 li:odd").click(function(){

            alert(".ul1 li:odd-----------" + jq(this).attr("class"));

        });

        jq(".ul1 li:eq(1)").click(function(){

            alert(".ul1 li:eq(1)-----------" + jq(this).attr("class"));

        });

        jq(":input").click(function(){

            alert(":input-----------" + jq(this).val());

        });

        jq(":text").click(function(){

            alert(":text-----------" + jq(this).val());

        });

        jq(":enabled").click(function(){

            alert(":enabled-----------" + jq(this).val());

        });

        jq(":disabled").click(function(){

            alert(":disabled-----------" + jq(this).val());

        });

        jq("#text").change(function(){//控件失去焦点后，检查内容是否变化，变化激活

            alert(".change()-----------" + jq(this).val());

        });

        jq("#text").focus(function(){//控件获得焦点

            alert(".focus()-----------" + jq(this).val());

        });

    </script>

</html>

二、文档操作：

<html>

    <head>

        <title>jQuery文档操作</title>

        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

        <style>

            ul{display:inline-block;}

            li{float:left;min-width:80px;height:40px;line-height:40px;margin-right:20px;border-radius:5px;background-color:#DFE0DF;color:#f54372;text-align:center;cursor:pointer;}

            p.select{color:#f54372;}

        </style>

    </head>

    <body>

        <p class="p p1" id="p1">第一段文字</p>

        <p class="p p2" id="p2">第二段文字</p>

        <ul class="ul1">

            <li>addClass()</li>

            <li>after()</li>

            <li>before()</li>

            <li>append()</li>

            <li>attr()</li>

            <li>empty()</li>

            <li>hasClass()</li>

            <li>html()</li>

        </ul>

        <br/><br/>

        <ul class="ul2" style="position:relative;">

            <li>css()</li>

            <li>height()</li>

            <li>offset()</li>

            <li>offsetParent()</li>

            <li>position()</li>

            <li>scrollLeft()</li>

            <li>scrollTop()</li>

            <li>width()</li>

        </ul>

    </body>

    <script>

        $(".ul1 li:eq(0)").click(function(){

            $(".p1").addClass("select");

        });

        $(".ul1 li:eq(1)").click(function(){

            $(".p1").after("after");

        });

        $(".ul1 li:eq(2)").click(function(){

            $(".p1").before("before");

        });

        $(".ul1 li:eq(3)").click(function(){

            $(".p1").append("append");

        });

        $(".ul1 li:eq(4)").click(function(){

            alert($(".p1").attr("id"));

        });

        $(".ul1 li:eq(5)").click(function(){

            $(".p1").empty();

        });

        $(".ul1 li:eq(6)").click(function(){

            alert($(".p1").hasClass("第一段文字"));

        });

        $(".ul1 li:eq(7)").click(function(){

            $(".p1").html("html");

        });

        $(".ul2 li:eq(0)").click(function(){

            $(".p1").css("color","red");

            $(".p2").css({"color":"white","background-color":"#98bf21","font-family":"Arial","font-size":"20px","padding":"5px"});

        });

        $(".ul2 li:eq(1)").click(function(){

            alert($(this).height());

            $(this).height("50px");

        });

        $(".ul2 li:eq(2)").click(function(){

            alert("left:"+$(this).offset().left+"   top:"+$(this).offset().top);

        });

        $(".ul2 li:eq(3)").click(function(){

            $(this).offsetParent().css("background-color", "red");

        });

        $(".ul2 li:eq(4)").click(function(){

            alert("left:"+$(this).position().left+"   top:"+$(this).position().top);

        });

        $(".ul2 li:eq(5)").click(function(){

            alert("scrollLeft:"+$(this).scrollLeft());

        });

        $(".ul2 li:eq(6)").click(function(){

            alert("scrollTop:"+$(this).scrollTop());

        });

        $(".ul2 li:eq(7)").click(function(){

            alert("widht:"+$(this).width());

            $(this).width("200px");

        });

    </script>

</html>

三、移动端判断用户是否在微信中打开

　　近期由于公司移动端推广，调用微信支付时，在非微信的浏览器中打开，无法调用微信支付接口，通过联系微信客服，给出的回复时，H5支付处于内测阶段，和微信签署战略协议的商家才有可能获得内测接口，所以对于UC、谷歌、QQ等浏览器均无法直接调用到微信的支付接口。所以被迫在支付页面将非微信端打开时，隐藏微信支付入口；在微信端打开时，显示微信支付接口。那怎么才能知道用户用的是微信打开，还是其他浏览器打开呢？

function is_weixn(){

    var ua = navigator.userAgent.toLowerCase();

    if (ua.match(/MicroMessenger/i) == "micromessenger") {

        alert("微信浏览器");

    } else {

        alert("非微信浏览器");

    }

}

　　以上便是我总结的Jquery中我们经常使用到的操作，如果不能满足您的需要，请移步w3school

Jquery的事件操作和文档操作的更多相关文章

  1. elasticsearch的索引操作和文档操作总结

    参考文档:https://es.xiaoleilu.com/010_Intro/00_README.html 一.索引操作 1.查看当前节点的所有的index 查看当前节点的所有的index [roo ...

  2. 前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系

    JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...

  3. Elasticsearch索引和文档操作

    列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...

  4. 前端开发之jQuery属性和文档操作

    主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...

  5. jQuery 【事件】【dom 操作】

    事件  hover( function(){},function(){})   --  鼠标移入移出事件   toggle(function(){},function(){},function(){} ...

  6. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  7. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  8. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  9. python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)

    昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...

随机推荐

  1. 日期格式代码出现两次的错误 ORA-01810

    错误的原因是使用了两次MM . 一.Oracle中使用to_date()时格式化日期需要注意格式码 如:select to_date('2005-01-01 11:11:21','yyyy-MM-dd ...

  2. Xamarin+Prism开发详解六：DependencyService与IPlatformInitializer的关系

    祝各位2017年事业辉煌!开年第一篇博客,继续探索Xamarin.Forms… 为什么我做Xamarin开发的时候中意于Prism.Forms框架?本章为你揭晓. 实例代码地址:https://git ...

  3. 如何一步一步用DDD设计一个电商网站（四）—— 把商品卖给用户

    阅读目录 前言 怎么卖 领域服务的使用 回到现实 结语 一.前言 上篇中我们讲述了“把商品卖给用户”中的商品和用户的初步设计.现在把剩余的“卖”这个动作给做了.这里提醒一下,正常情况下,我们的每一步业 ...

  4. Spring之旅(2)

    Spring简化Java的下一个理念:基于切面的声明式编程 3.应用切面 依赖注入的目的是让相互协作的组件保持松散耦合:而AOP编程允许你把遍布应用各处的功能分离出来形成可重用的组件. AOP面向切面 ...

  5. Android性能优化之利用LeakCanary检测内存泄漏及解决办法

    前言: 最近公司C轮融资成功了,移动团队准备扩大一下,需要招聘Android开发工程师,陆陆续续面试了几位Android应聘者,面试过程中聊到性能优化中如何避免内存泄漏问题时,很少有人全面的回答上来. ...

  6. JavaScript模仿块级作用域

    avaScript 没有块级作用域的概念.这意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,来看下面的例子: function outputNumbers(count){ for ( ...

  7. 【原创分享·微信支付】C# MVC 微信支付教程系列之现金红包

            微信支付教程系列之现金红包           最近最弄这个微信支付的功能,然后扫码.公众号支付,这些都做了,闲着无聊,就看了看微信支付的其他功能,发现还有一个叫“现金红包”的玩意,想 ...

  8. 修改eclipse皮肤

    习惯了vim黑色背景的程序猿们想必用eclipse时会倍感的不适应吧,不过没关系,因为eclipse的皮肤是可以自己定制的! 下面是我电脑上的eclipse界面,看到这个是不是找回了vim的感觉呢? ...

  9. [开发笔记] Graph Databases on developing

    TimeWall is a graph databases github It be used to apply mathematic model and social network with gr ...

  10. [原]Paste.deploy 与 WSGI, keystone 小记

    Paste.deploy 与 WSGI, keystone 小记 名词解释: Paste.deploy 是一个WSGI工具包,用于更方便的管理WSGI应用, 可以通过配置文件,将WSGI应用加载起来. ...