ASP.NET动态网站制作(9)-- JQ(1)
前言:从这节课开始讲jQuery的相关内容,这节课主要围绕jQuery的选择器展开。
内容:
1.jQuery是一个优秀的js框架,目前企业里大多数都是用jQuery(以下简称jq)。jq是对js里一些常用功能的封装和简化,可以说jq是Write less, do more。jq的底层还是基于js。
2.使用jq之前,需要添加jquery.js文件。第一个例子:
HTML代码:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo.js"></script>
</head>
<body>
<input type="button" value="我是一个按钮" id="btn"/>
</body>
</html>
JS代码:
$(function() {
$("#btn").click(function() {
alert("Hello world~");
});
});
上面的代码虽然简单,但是它体现了我们操作jq的思路及思想:1.$(function(){});代表页面加载之后;2.$("#btn")找到jq对象;3.执行所需的事件click();4.声明一个事件,用function();5.完成事件里面的内容。
$(document).ready(function(){});就等价于$(function(){});---后面的写法是前面写法的简写,都表示页面加载之后。
$("#btn")是jq中的找到对象,document.getElementById("btn")是相应的js中的找到对象写法,由此可以看出jq的写法简单了很多。
3.jq中的“$”:
(1)选择器:id选择器($("#showDiv"));类选择器($(".someClass"));标签选择器($("input"))
(2)特殊: $("p:odd"):选择所有位于奇数行的<p>标记;$("p:even"):选择所有位于j偶数行的<p>标记;
$("td:nth-child(1)"):所有表格行的第一个单元格,就是第一列;
$("li>a"):返回<li>标签中的所有子元素<a>,不包括孙元素;
$("a[title]"):选择所有设置了title属性的超链接;
$("a[href='www.bing.com']"):选择所有等于www.bing.com的超链接;
$("a[href^=http]"):选择所有设置了以http开头的超链接;
$("a[href$=pdf]"):选择所有以pdf结尾的超链接;
$("a[href*=pdf]"):选择所有包含pdf的超链接。
4.功能函数前缀:$.trim(sString):去掉字符串前后的空格,但不能去掉字符串中间的空格。若要想去掉字符串中间的空格,用split()方法将字符串变为字符数组,然后遍历数组,若是空格则去掉就好,代码如下:
var sInput = $(#txt).val();
var aInput = sInput.split("");
for(var i = 0; i < aInput.length; i++)
{
if(aInput[i]==" ")
{
sInput = sInput.replace(" ","");
}
}
alert(sInput);
5.包含选择器:$("li:has(a)"):包含超链接的所有li标签。
6.位置选择器:$("p:first"):整个页面中的第一个p标签;
$("p:last"):整个页面中的最后一个p标签;
$("p:first-child"):选择所有的p标签,且这些p标签是其父标签的第一个标签;
$("p:last-child"):选择所有的p标签,且这些p标签是其父标签的最后一个标签;
$("p:nth-child(odd)").addClass("myClass"):选择所有的p标签,且这些p标签是其父标签的奇数行;
$("p:odd"):整个页面的奇数行p标签;
$("p:eq(4)")或$("p").eq(4):第5个p标签,有两种写法;
$("p:eq(2)").siblings():第3个p标签的兄弟,即除了第三个之外的所有p标签;
$("p:eq(2)").prev():第3个p标签的前一个p标签;
$("p:eq(2)").next():第3个p标签的后一个p标签;
$("p:eq(2)").parent().attr("id"):获取第3个p标签的父标签的id属性值;
$("p:gt(n)"):第n个(从0开始,不包括n本身)p标签之后的所有p标签,只有一种写法;
7.过滤选择器:$("input[name='a']"):选择所有name属性为a的input标签;
$(":button"):所有按钮;
$("div:contains(foo)"):所有包含了文本”foo“的元素;
$(":disable"):所有被禁用的元素,等价于:$("input[disabled=disabled]").attr("value","aaa");
$(":enable"):所有没有被禁用的元素;
$(":file"):所有上传文件;
$(":input"):所有表单元素;
$(":selected"):所有下拉菜单中被选中的项;
$(":visible"):所有可见的元素;
$(":submit"):所有提交按钮;
8.反向过滤:$("input:not(:radio)"):表示input中所有非radio元素;:not(filter)中的filter必须是过滤选择器,而不能是其他选择器。
后记:预习,复习,练习。
ASP.NET动态网站制作(9)-- JQ(1)的更多相关文章
- ASP.NET动态网站制作(3)--css(2)
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- ASP.NET动态网站制作(18)-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作(11)-- JQ(3)
前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式: (1)添加.删除css类别:$("div").addClass(& ...
- ASP.NET动态网站制作(13)-- JQ(5)
前言:jq的最后一节课,主要讲解应用, 内容: 1.会飞的li: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...
- ASP.NET动态网站制作(12)-- JQ(4)
前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置: (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...
- ASP.NET动态网站制作(10)-- JQ(2)
前言:jq的第二节课. 内容: 1.管理选择结果: (1)获取元素个数:$("img").size():获取页面中所有“img”个数: (2)提取元素:$("img[ ...
- ASP.NET动态网站制作(20)-- C#(3)
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作(1)--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作(0)
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
随机推荐
- 浮点优化选项 -ffast-math:极大地提高浮点运算速度【转】
转自:http://blog.csdn.net/zjujoe/article/details/2604157 版权声明:本文为博主原创文章,未经博主允许不得转载. 目录(?)[-] 关于浮点优化选项摘 ...
- Kali Linux 2017.1脚本gerix.py修复
Kali Linux 2017.1脚本gerix.py修复 Gerix是一款优秀的图形界面的无线渗透工具.从Kali Linux 2016.2开始,该工具在Kali Linux中运行就存在一些问题 ...
- CodeForces - 316E3 Summer Homework
Discription By the age of three Smart Beaver mastered all arithmetic operations and got this summer ...
- delphi的^和@的作用
Pint:^string;在这里将^放在数据类型之前,说明是声明的字符串指针类型!如果想取出指针引用的值的话,就将^放在声明的类型后就可以了,比如:Pint^想取Pint类型的所引用地址的话,就将@放 ...
- 在Bonobo服务器里创建Repository(库)
新建Repository步骤如下: 点击“库”链接,进入“库管理”页面,如下图所示: 在“库管理”页面点击“创建新库”按钮,进入“创建新库”页面,如下图所示: 点击“建立”按钮,会进入“库管理”页面, ...
- AIX 删除指定目录、指定后缀、指定天数以前的历史文件
find /home/oracle/admin/zhjport/udump/ -name "*.trc" -mtime +30 -exec rm {} \; 如果要自动执行可以加入 ...
- Linux下防火墙iptables用法规则详及其防火墙配置
转:http://www.linuxidc.com/Linux/2012-08/67952.htm iptables规则 规则--顾名思义就是规矩和原则,和现实生活中的事情是一样的,国有国法,家有家规 ...
- mysql 远程登陆不上
当使用 TCP/IP 连接 mysql 时, 出现 : Can't connect to MySQL server on 'xxx.xxx.xxx.xxx.'(111) 这个错误. 经过重复折腾: 确 ...
- 版本号控制软件:TortoiseSVN高速上手
百度百科对于SVN的一点解释: TortoiseSVN是Subversion版本号控制系统的一个免费开源client,能够超越时间的管理文件和文件夹.文件保存在中央版本号库,除了能记住文件和文件夹的每 ...
- Shell脚本之:if-else
Shell 有三种 if ... else 语句: 1.if ... fi 语句: 2.if ... else ... fi 语句: 3.if ... elif ... else ... fi 语句. ...