前言：从这节课开始讲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）的更多相关文章

  1. ASP.NET动态网站制作（3）--css（2）

    前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...

  2. ASP.NET动态网站制作（18）-- jq作业讲解及知识补充

    前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...

  3. ASP.NET动态网站制作（11）-- JQ（3）

    前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式:  (1)添加.删除css类别:$("div").addClass(& ...

  4. ASP.NET动态网站制作（13）-- JQ（5）

    前言:jq的最后一节课,主要讲解应用, 内容: 1.会飞的li: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...

  5. ASP.NET动态网站制作（12）-- JQ（4）

    前言:这节课接着上次课的继续讲. 内容:接上--> 1.jq元素样式设置:  (4)某个元素中是否含有某个css类别,返回布尔型:$("li:last").hasClass( ...

  6. ASP.NET动态网站制作（10）-- JQ（2）

    前言:jq的第二节课. 内容: 1.管理选择结果:  (1)获取元素个数:$("img").size():获取页面中所有“img”个数:  (2)提取元素:$("img[ ...

  7. ASP.NET动态网站制作（20）-- C#（3）

    前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...

  8. ASP.NET动态网站制作（1）--html

    前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...

  9. ASP.NET动态网站制作（0）

    前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...

随机推荐

  1. Linux每日一坑001

    centos6,7中网卡/etc/sysconfig/network-scripts/ifcfg-eth0的命名是有要求的,必须是ifcfg-开头.改网卡名的时候掉坑.

  2. Redis 批量删除Redis的key 正则匹配删除

    del 删除单个key方便 要是删除多个就不是很方便了 这时候可以使用xsrsg来批量删除 1.退出redis 2.匹配CCPAI:开头的所有key*删除 redis-cli -a 密码 -h hos ...

  3. TopCoder SRM 301 Div2 Problem 1000 CorrectingParenthesization（区间DP）

    题意  给定一个长度为偶数的字符串.这个字符串由三种括号组成. 现在要把这个字符串修改为一个符合括号完全匹配的字符串,改变一个括号的代价为$1$,求最小总代价. 区间DP.令$dp[i][j]$为把子 ...

  4. Cocos 2d-X Lua游戏开发Mac环境搭建以及一点点感悟

    接触Cocos2d-x 最近由于公司项目的需要,自己开始接触Cocos,开始做一些简单的轻量级的游戏,以前没有接触过这一块的东西,也是借助这个机会学习一下游戏的开发,由于以前自己接触的全都是iOS和A ...

  5. 树的直径新求法、codeforces 690C3 Brain Network (hard)

    树的直径新求法 讲解题目 今天考了一道题目,下面的思路二是我在考场上原创,好像没人想到这种做法,最原始的题目,考场上的题目是这样的: 你现在有1 个节点,他的标号为1,每次加入一个节点,第i 次加入的 ...

  6. ural 1519 fomular 1 既插头DP学习笔记

    直接看CDQ在2008年的论文吧. 个人认为她的论文有两个不明确的地方, 这里补充一下: 首先是轮廓的概念. 我们在进行插头DP时, 是从上往下, 从左往右逐个格子进行的, 已经处理的格子与未经处理的 ...

  7. Linux内核网络栈源代码分析

    http://blog.csdn.net/column/details/linux-kernel-net.html

  8. 评分条RatingBar Android

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  9. 【共享单车】—— React后台管理系统开发手记：Router 4.0路由实战演练

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  10. POJ 3254 Corn Fields 状态压缩

    这题对我真的非常难.实在做不出来,就去百度了,搜到了一种状压DP的方法.这是第一种 详细见凝视 #include <cstdio> #include <cstring> #in ...