C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★
JQuery 与 JS 之间的转换
将JQuery转换为JS —— get(0) 例如:alert( $("#d1").get(0).offsetwidth );
将JS 转换为JQuery —— $(" ") 例如:$("#d1").click(function(){});
1、什么是JQuery?
它就是一套JS方法包,也叫JS框架或前端框架
Node.js 是一个开发环境
2、JQuery的用法:文件引用到aspx网页中前台代码中
3、基本选择器:
$("#d1") ID 选择器
$(".cla") Class选择器
$("div") 标签名选择器
$("#d1,#d2,#d3,#d4") 并列选择器,用“,”隔开
$(".cla c2") 后代选择器,用空格隔开
4、过滤选择器:
基本过滤
首尾过滤:第一个和最后一个是指在代码中第一次出现的标签不管其位置如何
$(".c1:first") 获取class="c1"的标签的第一个
$(".c1:last") 获取class="c1"的标签的最后一个
等于某个索引
$(".d1:eq(x)") class="d1"的标签中索引为x的标签
$(".d1").eq(x).click({});
不等于某个索引
$(".d1:gt(索引值)") class="d1"的标签中索引大于x的标签
$(".d1:lt(索引值)") class="d1"的标签中索引小于x的标签
$(".d1:not(选择器)") class="d1"的标签中不包括(选择器)的其他所有
例如:$(".d1:not(.d1:eq(2))") class="d1"的所有标签中,除索引为2的其他的所有标签
奇偶过滤
$(".d1:odd") class="d1"的标签中索引为奇数的标签
$(".d1:even") class="d1"的标签中索引为偶数的标签
属性过滤
属性名 $(".d1[hehe]") class="d1"的标签中含有“hehe”属性的所有标签
属性值 $(".d1[hehe=wqf]") 或 $(".d1[hehe!=wqf]") class="d1"的标签中含有“hehe”属性的所有标签中 属性值等于或不等于某个值的标签
内容过滤
内容过滤 $(".d1:contains(字符串)") class="d1"的标签中内容包含字符串的所有标签
子元素过滤 $(".d1:has(标签名)") class="d1"的标签中内容包含某标签子元素的所有标签
5、JQuery的事件是把JS中的事件去掉on,比如JS中“onclick”、“ondblclick”,JQuery则为“click”、“dblclick”
例如:$(".d1").click( function () {} );
6、复合事件
hover 鼠标悬浮时和移出时事件
$(".d1").hover( function () {} , function () {});
toggle 点击事件,循环执行其中方法,允许其中有多种方法
$(".d1").toggle ( function () {} , function () {} );
7、未来元素
在网页加载之后,再创建出来的元素成为未来元素 live:未来元素 参数1:未来元素的事件 参数2:事件的内容
$(".d1").live( "click" , function () {} ); 未来元素class="d1"的标签的点击事件
如何不使用未来元素给新建的标签附加点击事件?
<script> function hehe() {
alert("aa");
}; //div点击事件
$(".d1").click(function () {
hehe();
}); //点击按钮创建新的div,附加点击事件
$("#btn1").click(function () {
var s = "<div class=\"d1\" onclick=\"hehe()\"></div>";
//在class="d1"的标签中最后一个 后面添加一个新的标签
$(".d1:last").after(s);
}); </script>
不使用未来元素为新创建的标签附加点击事件
8、事件冒泡
什么是事件冒泡?就是触发一个事件后联动触发其他多个事件
阻止事件冒泡:return false;
C#-WebForm-★★★JQuery知识——基础知识、选择器、事件★★★的更多相关文章
- Windows_Program_Via_C_Translate_Win32编程的背景知识/基础知识_包括基本输入输出机制介绍
Some Basic Background Story of The Win32 APIs Win32 API背景故事/背景知识 The Win32 application programming i ...
- 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建
/* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...
- jQuery入门基础(选择器)
一.jQuery简介 jQuery 是一个 JavaScript 库. jQuery 极大地简化了 JavaScript 编程. jQuery 库位于一个 JavaScript 文件中,其中包含了所有 ...
- 【jquery】基础知识
jquery简介 1 jquery是什么 jquery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. jQuery是继prototype之后 ...
- jquery 的基础知识,以及和Javascript的区别
想到之前所学的javascript 我们会想到这几个方面:找元素: 操作内容: 操作属性:操作样式:统一操作元素: jquery 也是从这几个方面来学习的. <head> <meta ...
- jQuery笔记——基础知识
jQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法.在jQuery程序中,不管是页面元素的选择.内置的功能函数,都是美元符号“$”来起 始的.而这 ...
- 【JQuery基础知识/statusCode(状态码)】---初学者必备
今天,给大家分享一下JQuery的基础知识,简单介绍一下JQuery高级_Ajax,和我们常见的一些statusCode(状态码)~~~ 如果存在错误,请大家多多指正留言~小女子在此谢过! 一.JQu ...
- JAVA面试题集之基础知识
JAVA面试题集之基础知识 基础知识: 1.C 或Java中的异常处理机制的简单原理和应用. 当JAVA程序违反了JAVA的语义规则时,JAVA虚拟机就 ...
- JQuery基础知识==jQuery选择器
选择器是jQuery的基础,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器 1. CSS选择器 1.1 CSS是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择 ...
随机推荐
- Differential expression analysis for paired RNA-seq data 成对RNA-seq数据的差异表达分析
Differential expression analysis for paired RNA-seq data 抽象背景:RNA-Seq技术通过产生序列读数并在不同生物条件下计数其频率来测量转录本丰 ...
- vue.js和angular.js的区别
关于Vue的描述: HTML模版+JSON数据,再创建一个Vue实例,就这么简单 关于Angular的描述: AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态 ...
- jquery.fn.extend() 与 $.jquery 作用及区别
原文:http://www.cnblogs.com/liu-l/p/3928373.html jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如$.ajax()这种,要不就是拓展 ...
- msfconsole邮件收集器模块
msfconsole search email collector use auxiliary/gather/search_email_collector show options 下面我们设置域名. ...
- UIWebView清除缓存和cookie[转]
现在项目遇到一个问题,游戏底层用Cocos2d-x,公告UI实现是用的UIWebView, 然后第一次在有网络的环境下运行公告UI,会加载url链接,同时就会自动存入缓存,当下次手机没有网络的环境下, ...
- VR眼镜和AR眼镜的区别
VR眼镜是纯虚拟的世界建模,不结合现实世界.(VR一体机和手机VR眼镜是不同的,不只是是不是以手机为载体播放器的问题,而是它们结构上也有很大的区别:另外还有一点就是电脑端VR,这个主要是游戏:http ...
- [转]构建基于WCF Restful Service的服务
本文转自:http://www.cnblogs.com/scy251147/p/3566638.html 前言 传统的Asmx服务,由于遵循SOAP协议,所以返回内容以xml方式组织.并且客户端需要添 ...
- HRBUST1315 火影忍者之~大战之后 2017-03-06 16:14 54人阅读 评论(0) 收藏
火影忍者之-大战之后 经历了大战的木叶村现在急需重建,人手又少,所以需要尽可能多的接受外来的任务,以赚取报酬,重建村庄,假设你现在是木叶的一名高级忍者,有一大堆的任务等着你来做,但毕竟个人时间有限,所 ...
- JAVA常见面试题及解答
JAVA相关基础知识1.面向对象的特征有哪些方面 1.抽象:抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时 ...
- 咏南CS开发框架新的界面风格
咏南CS开发框架新的界面风格 这种风格完全和WINDOWS桌面一样,符合用户的操作习惯. 我的桌面的图标和WINDOWS桌面一样分为二类:1)快捷方式 2)文件夹. 如果快捷方式较多,看得人眼花缭乱 ...