2015.01.06 JQuery
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的更多相关文章
- Contest2073 - 湖南多校对抗赛（2015.04.06）
Contest2073 - 湖南多校对抗赛(2015.04.06) Problem A: (More) Multiplication Time Limit: 1 Sec Memory Limit: ...
- Cheatsheet: 2015 06.01 ~ 06.30
Web The Front-End Optimization Checklist [ASP.NET 5] Production Ready Web Server on Linux. Kestrel + ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- Cheatsheet: 2015 01.01~ 01.31
JAVA JVM Architecture Improving Lock Performance in Java 10 Best Java Tools That Every Java Programm ...
- jQuery编程基础精华01（jQuery简介,顶级对象$,jQuery对象、Dom对象,链式编程,选择器）
jQuery简介 什么是jQuery? jQuery就是一个JavaScript函数库,没什么特别的.(开源)联想SQLHelper类 jQuery能做什么?jQuery是做什么的? jQuery本身 ...
- 06 Jquery 基础
前端学习之jquery: jQuery:一个库 Jquery的基础语法: $(selector).action() 基本选择器: <script> //基本选择器 //$("*& ...
- [UI] 06 - jQuery
前言 From : http://www.runoob.com/jquery/jquery-intro.html Ref: jQuery 实例 一.什么是 jQuery ? jQuery是一个Java ...
- 01：jQuery的下拉选select2插件用法
1.1 select2插件基本使用 1.下载select2插件 1. 下载地址:https://github.com/select2/select2 2.官网地址:https://select2.or ...
- Murano Weekly Meeting 2015.10.06
Meeting time: 2015.October.6th 1:00~2:00 Chairperson: Kirill Zaitsev, from Mirantis Meeting summar ...
随机推荐
- C语言指针的初始化和赋值
1.指针的初始化 指针初始化时,"="的右操作数必须为内存中数据的地址,不能够是变量,也不能够直接用整型地址值(可是int*p=0;除外,该语句表示指针为空).此时,*p仅仅是表示 ...
- 对‘pthread_create’未定义的引用
由于pthread库不是Linux系统默认的库,连接时需要使用库libpthread.a,所以在使用pthread_create创建线程时,在编译中要加-l pthread参数: gcc exampl ...
- HTTP请求的TCP瓶颈分析[转]
阅读目录 延迟的因素 速度延时 带宽延时 最后一公里延时-tracerouter 目标 rwnd的设置 慢启动过程 慢启动的影响 慢启动对HTTP影响的一次计算 拥塞窗口的合适值 服务器配置调优 应用 ...
- kvm 图形化安装
为了再后续查看方便,我还是完整的记录kvm图形化安装. 介于网络环境的原因,我选择NAT. 2,安装kvm前的准备工作 2.1 关闭防火墙 setenforce 0 vi /etc/sysco ...
- apache 限制指定user_agent
有些user_agent 不是我们想要的,可以通过rewrite功能针对 %{HTTP_USER_AGENT} 来rewirete到404页,从而达到限制某些user_agent的请求. 配置如下 ...
- Java web项目
前言 本文目标:使用eclipse为IDE环境搭建一个基于maven的web项目,讲解搭建过程,项目结构,程序运行.调试和测试过程,并使用maven作为持续集成工具. 面向对象:转型java的 ...
- UMl概述（转）
1. UML的组成 UML由视图(View).图(Diagram).模型元素(Model Element)和通用机制(General Mechanism)等几个部分组成. a) 视图(View): 是 ...
- OC准备知识
#import 与 #include区别 include完成头文件的导入,可能会导致头文件的相互引用和函数或变量的重复定义 为了解决这个问题 我们必须这样做 #ifndef Student_h #de ...
- 敏捷软件开发之TDD（一）
测试驱动开发即TDD是敏捷软件开发方法的重要组成部分.TDD是从极限编程中发展而来,它既可以用在设计时也可以用在开发实践中.TDD把业务需求转化为可以运行的测试代码并具有如下的优点1.TDD从一开始就 ...
- DataSet 图解
DataSet层次结构中的类请参见表所示: 类 说明 DataTableCollection 包含特定数据集的所有DataTable对象 DataTable 表示数据集中的一个表 DataColumn ...