Jquery的事件操作和文档操作
对于熟悉前端开发的小伙伴，相信对于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的事件操作和文档操作的更多相关文章
- elasticsearch的索引操作和文档操作总结
参考文档:https://es.xiaoleilu.com/010_Intro/00_README.html 一.索引操作 1.查看当前节点的所有的index 查看当前节点的所有的index [roo ...
- 前端（十八）—— jQuery高级操作：选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- Elasticsearch索引和文档操作
列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- jQuery 【事件】【dom 操作】
事件 hover( function(){},function(){}) -- 鼠标移入移出事件 toggle(function(){},function(){},function(){} ...
- jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax
jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- python 全栈开发，Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
随机推荐
- opencv中Mat与IplImage,CVMat类型之间转换
opencv中对图像的处理是最基本的操作,一般的图像类型为IplImage类型,但是当我们对图像进行处理的时候,多数都是对像素矩阵进行处理,所以这三个类型之间的转换会对我们的工作带来便利. Mat类型 ...
- bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序
也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...
- C语言 · 最大值与最小值计算
输入11个整数,计算它们的最大值和最小值. 样例输入 0 1 2 3 4 5 6 7 8 9 10 样例输出 10 0 #include<stdio.h> int main(){ ]; ...
- 关于全局ID，雪花（snowflake）算法的说明
上次简单的说一下:http://www.cnblogs.com/dunitian/p/6041745.html#uid C#版本的国外朋友已经封装了,大家可以去看看:https://github.co ...
- pandas基础-Python3
未完 for examples: example 1: # Code based on Python 3.x # _*_ coding: utf-8 _*_ # __Author: "LEM ...
- Docker与CI持续集成/CD
背景 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制 ...
- iOS自定义model排序
在开发过程中,可能需要按照model的某种属性排序. 1.自定义model @interface Person : NSObject @property (nonatomic,copy) NSStri ...
- Dynamics CRM 之ADFS 使用 WID 的独立联合服务器
ADFS 的使用 WID 的独立联合服务器适用于自己的测试环境,常用的就是在虚机中使用. 拓扑图如下: wID:联合身份验证服务配置为使用 Windows 内部数据库
- Linux基础介绍【第三篇】
更改SSH服务端远程登录的配置 windows服务端的默认远程管理端口是3389,管理员用户是administrator,普通用户是guest.Linux的管理用户是root,普通用户默认有很多个,远 ...
- 我想立刻辞职，然后闭关学习编程语言，我给自己3个月时间学习C语言！这样行的通吗
文章背景,回答提问:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗? 我的建议是这样:1. 不要辞职.首先说,你对整个开发没有一个简单的了解,或一个系统的入门学习.换句 ...