1/**//******************************
2 * jQuery学习笔记
3 * @author Linvo
4 ******************************/
5
6/**//*=========
7 2009-1-14
8=========*/
9$() = $(document)
10
11//实现window.onload()效果
12$().ready(
13 function(){
14 //需要执行的内容
15 }
16);
17
18//获取DOM元素(返回值为jQuery对象)
19$(element) //相应元素名的
20$(.classname) //class值匹配的
21$(element.classname) //相应元素中,class值匹配的
22$(#id) //id匹配的
23$(element#id) //相应元素中,id匹配的
24$(element1 > element2) //元素一 下 的所有元素二(只包括儿子)
25$(element1 element2) //元素一 中 的所有元素二(包括子孙等)
26$(element1 + element2) //元素一 后 的所有元素二(代码后)
27$(element1 ~ element2) //与元素一 并列 的所有元素二(兄弟元素二)
28
29$(#id).html("") //设置 getElementById("id").innerHTML = ""
30$(#id).html() //取出 getElementById("id").innerHTML
31
32//动画出现效果
33$(#id).show(speed, [callback])
34$(#id).slideDown(speed, [callback])
35……
36
37
38/**//*=========
39 2009-1-16
40=========*/
41//在<p>外面包围另一个结构(html代码/元素)
42$("p").wrap("<div class='wrap'></div>")
43$("p").wrap(document.getElementById('content'))
44
45$("p").append("<b>Hello</b>"); //<p>I would like to say: <b>Hello</b></p>
46$("p").prepend("<b>Hello</b>"); //<p><b>Hello</b>I would like to say: </p>
47$("p").before("<b>Hello</b>"); //<b>Hello</b><p>I would like to say: </p>
48$("p").after("<b>Hello</b>"); //<p>I would like to say: </p><b>Hello</b>
49
50//【删除相应class的p元素】
51//<p class="classname">AAA</p> BBB <p>CCC</p>
52//BBB <p>CCC</p>
53$("p").remove(".classname");
54
55/**//*=========
56 2009-1-18
57=========*/
58//获取具有某属性值的相应元素
59$("input[name=qq]") //获取<input name="qq" type="text" />元素
60
61//属性与值关系
62= //等于
63*= //包含该值
64!= //不包含该值
65^= //以该值开头
66$= //以该值结尾
67
68//为每一个匹配的元素执行该函数
69$(element).each(function(){
70 //需要执行的内容
71})
72
73/**//*=========
74 2009-1-19
75=========*/
76/**//*
77jQuery中用post和get方法
78(ajax高层抽象方法,对ajax方法进行了封装)
79
80【当JQ中用post方式】
81PHP用$_POST接收时,只有n2
82PHP用$_GET接收时,只有n1
83
84【当JQ中用get方式】
85PHP用$_GET接收,n1 n2都有
86PHP用$_POST接收时,都没有
87*/
88$.post("do.php?n1=a", {n2: "b"},
89 function(data){
90 alert("Data Loaded: " + data);
91 }
92);
93
94/**//*=========
95 2009-1-20
96=========*/
97//DOM对象 -> jQuery对象
98//$(DOM对象)
99var v = document.getElementById("id"); //DOM对象 v
100var $v = $(v); //jQuery对象 $v
101
102//jQuery对象 -> DOM对象
103//jQuery对象.get(0) 或者 jQuery对象[0]
104var $v = $("#id"); //jQuery对象 $v
105var v = $v.get(0); //DOM对象 v
106var v = $v[0]; //DOM对象 v
107
108$(element).get(); //获取指定元素的集合
109
110//jQuery用ajax方法(ajax低层方法)
111$.ajax({
112 type: "POST", //POST时PHP中用$_POST接收,GET反之。
113 url: "do.php",
114 data: "n1="+x+"&n2="+y,
115 success: function(data){ alert( "Data Saved: " + data ); }
116});
117
118/**//*=========
119 2009-1-21
120=========*/
121//序列表表格内容为请求字符串
122//返回值:(例)name=linvo&age=22
123$("form").serialize() //序列化整个表单元素内容
124$("input[type=text]").serialize() //序列化指定元素内容(例)
125
126$(element).empty(); //移除指定元素下所有元素
127
128/**//*
129 CSS设置
130*/
131$(element).addClass("classname"); //为指定元素添加css样式
132$(element).removeClass("classname") //移除指定元素的css样式
133$(element).toggleClass("classname") //指定元素的css样式,有则删除,无则添加
134$(element).css("attname"); //获取指定元素相应属性的值(attname例:color)
135$(element).css("attname","value"); //设置……属性值(例:"color","#FF0000")
136$(element).css({ "margin-left": "10px", "background-color": "blue" });
137//使用“名/值对”进行批量设置……(例子见自身)
138
139/**//*=========
140 2009-1-22
141=========*/
142$(element1).next(element2) //与指定元素一 紧邻 的指定元素二
143$(element1).parent().is(element2) //元素一的父元素在元素二的集合中吗
144
145//模仿鼠标悬停事件
146//hover(over,out)
147//over:在上方执行 | out:移出时执行
148$(element).hover(
149 function(){
150 //在上方执行
151 }, function(){
152 //移出时执行
153 }
154)
155
分享到:
相关推荐
压缩包内包含jquery-1.6.4.js jquery-1.6.4.min.js jquery-1.6.4-vsdoc.js 。 【推荐用法】 1、将jquery-1.6.4-vsdoc.js与jquery-1.6.4.js放在同一目录,然后在vs中添加对jquery-1.6.4.js的引用即可; 2、切记:...
压缩包中的`jquery-starterkit`可能包含一个基础的jQuery项目模板,用于快速搭建使用jQuery的Web应用。它可能包含了基本的HTML结构、CSS样式和JavaScript脚本,展示了如何引入jQuery库、编写简单的DOM操作和事件处理...
jquery-ui-日期框扩展成时间框 jquery-ui时间框 基于别人的代码进行修改 jquery-ui-1.8.16.custom.css文件末尾加入以下代码 .ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; } .ui-timepicker-div dl{ ...
《jQuery UI与jQuery插件深度解析——以jquery-ui-1.8.2.custom.min.js为例》 在Web开发领域,jQuery库以其简洁易用的API和强大的功能深受开发者喜爱。而jQuery UI作为jQuery的一个扩展,提供了丰富的用户界面组件...
<script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-1.10.3.min.css" rel="stylesheet"> $( "#...
jquery-form-validator-plugin :用于字段验证。 使用简单的节点 js 服务器进行设置 下面是关于演示应用程序的草稿。 前端框架草案: Bootstrap CSS Google Fonts DOM / UI JQuery [jquery-1.10.2] Front end ...
这个压缩包包含两个关键文件:`jquery-ui-1.8.16.custom.min.js` 和 `jquery-ui-1.8.16.custom.css`,这些都是jQuery UI的特定版本,即1.8.16。这个版本在当时是一个广泛使用的稳定版本,提供了丰富的功能和组件。 ...
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 接下来,我们需要创建一个HTML元素来显示时间,例如一个`<div>`: ```html <div id="current-time"> ``` 现在,我们可以编写...
jquery-bootstrap-scrolling-tabs jQuery插件,用于使Bootstrap 3选项卡水平滚动而不是环绕滚动。 它们是这样的: 以下是展示他们与之合作的小品: 或者,如果您更喜欢CodePen: 用例 可选功能 也有可选功能: ...
流星-jquery-ui-drag-resize 为 Meteor 打包的 JQuery-Ui 拖拽和调整大小插件 包括来自 jQuery-Ui 的以下模块 核心 用户界面小部件 ui-鼠标 用户界面可拖动 用户界面可调整大小 安装套件 流星添加行星训练:jquery-...
jquery-1.10.2.min.js jquery-1.11.1.min.js jquery-1.11.3.min.js jquery-1.2.3.min.js jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-1.6.4.min.js jquery-1.7.2.min....
jQuery版本迁移辅助插件,如果您使用的低版本jQuery改为高版本后出现错误,可以试试这个插件。用来检测和恢复在jQuery1.9版本中已删除或已过时的API。jquery-migrate-1.2.1.js,jquery-migrate-1.2.1.min.js
`jquery.editable-select` 就是建立在 jQuery 之上,因此在使用前需要确保页面中已经引入了 jQuery。 2. **选择器的增强**:在默认情况下,HTML `<select>` 元素的功能相对有限。`jquery.editable-select` 提供了一...
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...
jquery插件jquery-ui-timepicker-addon.j
* Porting : Jquery barcode plugin * Version : 2.0.1 * * Date : September 05, 2010 * Author : DEMONTE Jean-Baptiste (firejocker) * HOUREZ Jonathan * Contact : jbdemonte @ gmail.com * Managed...
npm install jquery-smooth-scroll 或者 yarn add jquery-smooth-scroll 然后,使用import jquery-smooth-scroll ; 注意:这里假设window.jQuery在导入时可用。 CDN <!-- You can get a URL for jQuery from...
jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */
**jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
这个小型的JavaScript文件(jquery-migrate-1.2.1.min.js)包含了必要的代码,用于检测和修复那些在新版本中已被移除或改变的功能。 1. **API修复**:在jQuery 1.9及以后的版本中,一些过时的API被废弃,如`.live()...