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
转载于:https://www.cnblogs.com/AndroidJotting/p/6198027.html
Jquery的事件操作和文档操作相关推荐
- ElasticSearch之HTTP索引操作和文档操作
文章目录 1. 核心概念及数据格式 1.1 索引( Index) 1.2 类型( Type) 1.3 文档( Document) 1.4 字段( Field) 1.5 映射( Mapping) 1.6 ...
- Elasticsearch基础(三)索引和文档操作
1.api种类 1.1 TransportClient 是Elasticsearch官方的api TransportClient可以支持2.x,5.x版本,TransportClient将会在Elas ...
- ES的创建索引和文档操作
索引操作 1)创建索引 对比关系型数据库,创建索引就等同于创建数据库 点击postman ,创建一个new collections 再改个名 在Postmnan中,向ES服务器发PUT请求: http ...
- 【JavaScript】DOM和事件简介和文档加载流程以及DOM查询(上)案例(附源码)
- jQuery 属性,css,文档操作
dom对象与jQuery对象的区别 $(function() {// dom 与 jQuery对象间的转换var $txt = $(":input");// jQuery -> ...
- jQuery——入门(三)JQuery DOM操作(核心处理和文档处理)
jQuery--入门(三)JQuery DOM操作(核心处理和文档处理) 一.核心处理(JQuery对象访问) 1.页面加载检测函数:$(document).ready(function(){}); ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使 ...
- jQuery中的文档操作处理(五):append()、prepend()、after()、before()、wrap()、wrapAll()、wrapInner()、clone()等...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head ...
- jQuery操作标签--样式、文本、属性操作, 文档处理
1.样式 2.文本 3.属性操作 全选,反选效果 4.文档处理 操作标签 一.样式操作 样式类: addClass(); // 添加指定的css类名removeClass(); //移除指定的css类 ...
最新文章
- Gartner发布2020年数据与分析领域的十大技术趋势
- android系统应用开发_利用ADB工具免root停用Android系统应用
- 数学--数论--POJ 1061青蛙的约会 (扩展欧几里得算法)
- Spring : @Bean注解
- 拼多多上市关你什么事?
- 接口测试工具 soapui 下载及安装
- 网易云音乐工程师,亲自揭晓评论实现技术!| 技术头条
- 关于LSB图片隐写的解法
- python flask实战订餐系统微信小程序-60nginx + uwsgi 实现多进程访问
- 2022高级Android笔试总结,记录下我磕磕碰碰的三个月找工作经历
- linux给分区扩容
- Contrastive Loss 对比损失函数
- 编译Linux驱动程序
- python语音程序设计教程_Python语言程序设计教程
- 漫画:我是程序员,总想打测试工程师怎么办?
- CentOS8搭建FTP服务器
- Android开发越来越式微了吗?,爆火的Android面试题
- 百度翻译mac桌面端:百度翻译 for Mac
- Houdini to ue4 入门笔记 第一章
- (转)手机淘宝视频下载分析
热门文章
- Ubuntu 虚拟机空间不足增加空间笔记
- python后端工程师 数据爬虫
- [原创]Net实现Excel导入导出到数据库(附源码)
- Specify compute hosts with SSDs
- 自学python系列10:python的函数和函数式编程
- tomcat启动前端项目
- fastjson将json字符串转为Map对象,拿走不谢
- BZOJ1415 [Noi2005]聪聪和可可 【SPFA + 期望dp记忆化搜索】
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
- html标签思维导图