jQuery是一个兼容多浏览器的javascript库。开发出来的JavaScript的脚本包。非侵入性的脚本。

下载地址：http://jquery.com/          （打不开网页需要翻*墙） 下载 jQuery 1.x 即可。

1.找对象。
基本的结构。

 $(document).ready(function () {

 // 写代码

 //HTML文档在浏览器中加载完成时触发。

 });

选择器：

一、基本选择器
标签选择器。
class选择器。
ID选择器。
逗号隔开——并列
空格隔开——后代
>号隔开——子级选择

     <script language="javascript">

         $(document).ready(function () {

             $(".show>div").css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

         })

     </script>
 <body>

     <form id="form1" runat="server">

     <div>

         <div class="show"></div>

         <div class="show"></div>

         <div class="show"></div>

     </div>

     <div class="show">

         <div>

             <div></div>

         </div>

         <div></div>

     </div>

     </form>

 </body>

二、过滤选择器
$("基本选择:过滤选择")

（一）基本过滤——根据元素在HTML中的实际位置进行过滤。

 $(".show:first").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的第一个
 $(".show:last").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的最后一个
 $(".show:eq(2)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的第二个(0开始)
 $(".show:odd").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的奇数
 $(".show:even").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//取class为show的偶数
 $(".show:not(:first)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的排除第一个

（二）属性过滤——根据元素中的属性进行过滤。[]
[属性名]——
[属性名=值]——
[属性名!=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]

     <form id="form1" runat="server">

     <div>

         <div class="show" aaa="hello"></div>

         <div class="show" aaa="how are you"></div>

         <div class="show" aaa="ko"></div>

     </div>

     <div class="show">

         <div>

             <div></div>

         </div>

         <div></div>

     </div>

     </form>
 $(".show[aaa]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性的
 $(".show[aaa=hello]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性为hello的
 $(".show[aaa^=h]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性以h开头的
 $(".show[aaa$=o]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性以o结尾的
 $(".show[aaa*=o]").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的带有aaa属性并且属性包含o的
 $("input[type=text]").css("border", "solid blue 1px");//对文本框起作用

（三）内容过滤——根据开始标签和结束标签中间的内容进行筛选。
:contains(字符串)——元素中如果包含“字符串”，就选出该元素。
:has(选择器)——元素中包含对应选择器的子元素，就选中该元素。

     <form id="form1" runat="server">

     <div>

         <div class="show" aaa="hello">hello world</div>

         <div class="show" aaa="how are you">hello</div>

         <div class="show" aaa="ko">good afternoon</div>

     </div>

     <div class="show">

         <div id="d1">

             <div id="dd"></div>

         </div>

         <div id="d2" class="row1"></div>

     </div>

     </form>
 $(".show:contains(good)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//class为show的内容里包含“good”的
 $("div:has(#dd)").css("border", "solid blue 1px").css("height", "100px").css("margin", "10px");//包含dd子元素的元素
 $("input:disabled").css("background-color","green");//控件状态为不可用的背景色变为绿色
 $("input[disabled=disabled]").css("background-color", "green");//控件状态为不可用的背景色变为绿色

下面的需要加个GridView和样式表：

 $("#GridView1 tr:first").addClass("head");//在GridView1的第一行(表头)增加样式表里面的.head样式
 $("#GridView1 tr:gt(0)").addClass("row1");//在GridView1的第0行以后都加"row1"class
 $("#GridView1 tr:gt(0):odd").addClass("row1");//在GridView1的第0行以后奇数行都加"row1"class
 $("#GridView1 tr:gt(0):even").css("background-color", "pink");//在GridView1的第0行以后偶数行都加"row1"class

2.操作
一、元素本身的操作：添加，复制，替换，清空
empty()：把元素内容全部清空，元素开始结束标记保留
remove()：彻底删除元素，包括开始结束标记。
append(元素):在子元素的末尾追加
prepend(元素)：在子元素的开头追加。
replaceWith(元素)：
clone()：

二、元素属性的操作
1.读属性:attr("属性名")
var s = $(".show:last").attr("aaa");
2.添加、修改属性:attr("属性名","属性值")
$(".show:last").attr("bbb", "不许打瞌睡！").attr("aaa","kokokokokookoko");
3.移除属性:removeAttr("属性名")

 $(".show:last").attr("bbb", "卧槽哦！").attr("aaa", "kokokoko");//为class为show的最后一个添加属性bbb为"卧槽哦！"，修改aaa属性为"kokokoko"
 $("#Button1").removeAttr("disabled");//移除Button1中的属性"disabled"

三、元素样式的操作
（一）内联样式
读取样式：css("样式名")
设置样式：css("样式名","样式的值")
（二）操作样式表的class
addClass("样式表的class名")
removeClass("样式表的class名")

 $("#d2").removeClass("row1");//移除id为d2的class"row1"

四、元素内容的操作
（一）表单元素
文本类text,textarea,hidden,password 选择类radio,checkbox,select,file 按钮类submit,button,reset,image
1.读内容
选择器.val();
var s = $("#Button1").val();
2.写内容
选择器.val(值);
$("#Button1").val("修改后的按钮文字");

 var s = $("#Button1").val("修改后的文字");//把按钮Button1上的Text改为"修改后的文字"

（二）非表单元素
常规:容器类h1-h6,p,div,span,ul,ol,li，
常见:img a
表格:table tr td
1.读内容
选择器.html()
选择器.text()
2.写内容
选择器.html("内容")
选择器.text("内容")

 $(".show:last").html("kkkkkkkkkkkkk");//把class为show的最后一个的html改为"kkkkkkk"

五、相关元素的操作
前：prev(),prevAll(),prevAll(选择器)
后：next(),netxtAll(),nextAll(选择器)
内：find("选择器")
外：parent(),parents(),parents(选择器)

 　　　　　　　$(".show[aaa=hello]").next().css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

             $(".show[aaa=hello]").nextAll(".show").css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

             $(".show[aaa=hello]").prevAll().css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

             $(".show:first").find("div:last").css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

             $("#dd").parents(".show").css("border", "solid red 1px").css("height", "100px").css("margin", "10px");

             $("ul").empty();

             $("ul").remove();

             $("ul").append("<li>葡萄</li>");

             $("ul").prepend("<li>葡萄</li>")

             $("ol").append($("ul li:last").clone());

             $("ol li:last").replaceWith($("ul li:first"));

2015.01.06 JQuery的更多相关文章

  1. Contest2073 - 湖南多校对抗赛（2015.04.06）

    Contest2073 - 湖南多校对抗赛(2015.04.06) Problem A: (More) Multiplication Time Limit: 1 Sec  Memory Limit:  ...

  2. Cheatsheet: 2015 06.01 ~ 06.30

    Web The Front-End Optimization Checklist [ASP.NET 5] Production Ready Web Server on Linux. Kestrel + ...

  3. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  4. Cheatsheet: 2015 01.01~ 01.31

    JAVA JVM Architecture Improving Lock Performance in Java 10 Best Java Tools That Every Java Programm ...

  5. jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）

    jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...

  6. 06 Jquery 基础

    前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script> //基本选择器 //$("*& ...

  7. [UI] 06 - jQuery

    前言 From : http://www.runoob.com/jquery/jquery-intro.html Ref: jQuery 实例 一.什么是 jQuery ? jQuery是一个Java ...

  8. 01：jQuery的下拉选select2插件用法

    1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...

  9. Murano Weekly Meeting 2015.10.06

    Meeting time:  2015.October.6th 1:00~2:00 Chairperson:  Kirill Zaitsev, from Mirantis Meeting summar ...

随机推荐

  1. onvif规范 中文介绍

    什么是ONVIF ? ONVIF规范描述了网络视频的模型.接口.数据类型以及数据交互的模式.并复用了一些现有的标准,如WS系列标准等. ONVIF规范的目标是实现一个网络视频框架协议,使不同厂商所生产 ...

  2. IOS准备

    1.Commond + shift + H 相当于Home键 2.更改项目的名称和icon图标 info.plist文件->bundle name -> 写上工程显示的名字 3.更改ico ...

  3. UIPickerView(选择控制器) 自学之初体验

    UIPickerView 是一个选择器控件, 它可以生成单列的选择器,也可生成多列的选择器,而且开发者完全可以自定义选择项的外观,因此用法非常灵活.UIPickerView 直接继承了 UIView  ...

  4. kettle查询出来的真实值被识别为null

    问题描述: 通过关联表查询出来的applyId(申请编号),在数据流里也是能看到的,但是在写入到数据表中的时候,由于设置了这个字段不能为空,所以一直报错. 问题实质: 数据流内存在的数据却不能保存,原 ...

  5. SharedPreferences基础

    见归档项目:SharedPreferencesDemo.zip 1.对于数据量较小,且有明显的K-V形式的数据而言,适合用SharedPreferences保存.SharedPreferences的数 ...

  6. SlimDX的DirectSound模块

    网上SlimDX的资源很少,搜到了http://www.xukailun.me/article/238/这篇关于<SlimDX的DirectSound模块应用实战>的文章,备份下来以备不时 ...

  7. Python成长之路_装饰器

    一.初入装饰器 1.首先呢我们有这么一段代码,这段代码假设是N个业务部门的函数 def f1(aaa): print('我是F1业务') if aaa == 'f1': return 'ok' def ...

  8. QTableWidget嵌入QpushButton后定位QpushButton

    问题: 有时候会遇到这样的情况,在QTableWidget中我们需要嵌入一个QpushButton按钮,但是如何确定是哪个Button按下的呢? 解决: 一般地,一个按钮按下后会连接到一槽函数,那么在 ...

  9. Delphi与字符编码（实战篇）（MultiByteToWideChar会返回转换后的宽字符串长度）

    本文目标: 了解Delphi的字符串类型 字符编码的检测与转换 简体繁体转换 0. 导言 看完“.Net与字符编码(理论篇)”,我们明白了字符是自然语言中的最小单位,在存储和传输的过程中可以使用三种编 ...

  10. （Inno setup打包）检测系统是否已安装程序，若已安装则弹出卸载提示的代码

    原文 http://bbs.itiankong.com/thread-30983-1-5.html 有6天没研究pascal代码了,昨天晚上突然来了灵感,终于解决了苦思冥想好几天没能解决的问题, 因此 ...