<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery-study</title>
<script type="text/javascript" src="js/PCASClass.js" charset="gb2312"></script>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<!-- 注意DIV 的伪类 -->
<style type="text/css">
<!--
.firstCss {
color: #FFFFFF;
background-color: #000000;
}
.secondCss {
color: #3366FF;
background-color: #FF99FF;
}
div:hover {
background-color: #FFF;
}
div {
background-color: #CCC;
}
-->
</style>
<script type="text/javascript">
var timeNum = 3000;
$(document).ready(function(){
funShow();
funClick();
funJson();
funJson2();
if($.browser.msie){//判断浏览器
alert("this IE");
}else if($.browser.mozilla){
alert("this FireFox");
}else if($.browser.opera){
alert("this opera");
}
setTimeout("funRemove()",2*timeNum);//定时器
}
);
//事件
function funClick(){
$("#pTag3").attr({"class":"secondCss","align":"left"});//设置属性
$("#pTag3").bind("click", function() {//添加onclick 事件
$("#secondCss").attr("align","center");//添加属性
$("#pTag3").toggleClass("secondCss");//如果存在添加,反之删除
$("#pTag3").toggleClass("firstCss");
});
$("#textTag2").bind('click', function(event) {
$(".secondCss").css("color","#FFFFFF");//添加属性
alert(event.currentTarget.value);
});
}
//显示
function funShow(){
$("#pTag1").text("<a href='g.cn'>游戏开始1</a>");//这里设置文本内容
$("#pTag1").hide(timeNum);//隐藏
$("#pTag2").html("<a href='g.cn'>游戏开始2</a>");//设置HTML内容
$("#pTag2").fadeOut(timeNum);//淡出
$("#textTag1").val("<a href='g.cn'>游戏开始3</a>");//设置value
$("#textTag1").slideUp(timeNum,callbackShow);//上滑,完成后回调callbackShow方法
}
//回调方法
function callbackShow(){
$("p:eq(0)").show();//第1个p,
$("p:hidden").show();//所有隐藏
$("input").show();
}
//删除节点
function funRemove(){
alert("删除 <p> id=pTag1");
$("#pTag1").remove();//删除元素
}
//JSON
function funJson(){
var jsonDate = {"list":[{"userId":"001","userName":"good1"},{"userId":"002","userName":"good2"},{"userId":"003","userName":"good3"}],"message":"操作成功"};//手动构建Json数据
var html = "";
for(var i = 0,j = jsonDate.list.length;i < j;i ++){
html += "<p> userId="+ jsonDate.list[i].userId +" userName="+jsonDate.list[i].userName+"</p>";
}
html += "<p> MESSAGE:"+jsonDate.message+"</p>"
$("#divTag1").append(html);//目标追加HTML
}
//JSON
function funJson2(){
var jsonDate = "{'message':'funJson2操作成功'}";
jsonDate = eval("("+jsonDate+")");//手动把String 解析为JSON 数据注意eval("("+jsonDate+")")
var html = "<p> DIV2·MESSAGE="+jsonDate.message+"</p>";
$("#divTag2").replaceWith(html);//替换该HTML
}
</script>
</head>
<body>
<p id="pTag1"></p>
<p id="pTag2"></p>
<input type="text" id="textTag1" disabled="disable"/>
<hr>
<input type="text" id="textTag2" class="secondCss" value="点击这里"/>
<p id="pTag3" title="123"> 点击这里(两次) </p>
<hr>
<div id="divTag1"> DIV divTag1:<br>
</div>
<hr>
<div id="divTag2"> DIV divTag2:<br>
this DIV Tag
</div>
<hr>
省
<select name="Province" id="Province">
</select>
市
<select name="City" id="City">
</select>
区
<select name="Area" id="Area">
</select>
<script type="text/javascript">
new PCAS("Province","City","Area");//详细参见 PCASClass.js
</script>
</body>
</html>
分享到：
相关推荐
jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 jQuery打印插件jqprint，jquery.jqprint-0.3.js 下载，内包含使用示例，下载解压可直接在浏览器打开使用。 ...
"jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定，"sangat1"可能是项目名或者是个人开发者的名字，而"jquery3.4.1"是jQuery库的另一种写法，它们都指向同一种资源——jQuery 3.4.1。...
资源名称：Jquery easyui 使用说明内容简介：Jquery easyui 使用说明 中文PDF版主要讲述的是Jquery easyui 使用说明;感兴趣的朋友可以过来看看。jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的...
JavaScript+jQuery 网页特效设计 jQuery(3.4.1)基础 ...很多大公司都在使用 jQuery， 例如: Google Microsoft IBM Netflix 3、jQuery安装 “jquery-1.10.2.min.js”></script>// 需要注意下载的版本 3.1
这个“jQuery 教程”旨在为初学者提供详细的jQuery使用方法。 一、jQuery特点 1. 轻量级：jQuery库文件小巧，原始版本大约几十KB，经过压缩后通常不超过18KB，这使得它在网页加载时不会增加太多负担。 2. 强大选择...
编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程，基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件，并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。
从零开始学习jQuery (四) 使用jQuery 操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery 中的Ajax 从零开始学习jQuery (七) jQuery 动画-让页面动起来! 从零开始学习...
`jQuery1.11.0_20140330.chm`可能是早期版本的jQuery API参考，而`jQueryAPI_CHM.CHM`则是针对jQuery 1.x系列的API手册，可能包含了1.12.4版本的相关信息。 在这些API文档中，你可以找到jQuery的函数、方法、选择器...
第一部分介绍jQuery核心库，从如何使用jQuery开始，演示一些基础API的使用、如何优化选取集以及如何与服务器通信等内容。第二部分介绍 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
†jQuery是一款同prototype一样优秀js开发库类，特别是对css和XPath的支持，使我们写js变得更加方便！如果你不是个js高手又 想写出优 秀的js效果，jQuery可以 帮你达到目的！大家可以看看有keel翻译的jQuery入门
1. **异步表单提交**：通过使用`$.ajaxForm()`或`$.ajaxSubmit()`方法，可以实现异步表单提交。例如： ```javascript $("#myForm").ajaxForm({ success: function(response) { // 提交成功后的回调函数，response...
本套电子书《锋利的jQuery》和《15天学会jQuery》以及《jQuery使用手册》将帮助你深入理解和熟练掌握这一强大的工具。 首先，jQuery的核心理念是“Write Less, Do More”，它通过封装常见的DOM操作、事件处理、动画...
例如jQuery版本用的是1.x，计划升级到3.x，就可以在页面删除1.x版本，换成3.x版本，如果有脚本错误，就引入jquery-migrate插件用于兼容低版本，同时也显示低版本方法替换成新版本方法的方案。 jQuery migrate（转移...
在压缩包中的"jQuery API 中文文档3.2.1"，为开发者提供了详细的API文档，帮助理解每个方法的用途、参数和返回值，是学习和使用jQuery的宝贵资源。确保查阅这些文档，以便更好地理解和应用jQuery 3.2.1的新特性。 ...
你可以通过 CSS 自定义 AutoComplete 的样式，或者使用其他的 jQuery UI 主题。 ### 6. 示例项目 在提供的 `JqueryAutoCompleteDemo` 压缩包中，通常包含了完整的 HTML、CSS 和 JavaScript 文件，展示了如何使用 ...
本篇文章将深入探讨jQuery的基础知识，包括其基本介绍、使用步骤、jQuery对象与DOM对象的区别，以及jQuery的选择器。此外，我们还将讨论`mouseover`与`mouseenter`事件的区别、`index()`方法的用法以及如何区分...
在提供的压缩包中，`demo`文件夹可能包含一个简单的示例，演示了如何使用`jQuery Migrate`来修复旧代码。这个例子可能包括一个使用了已废弃API的HTML页面和相关的JavaScript脚本。通过观察和分析这个示例，你可以更...
### 一、jQuery 基本使用 jQuery 的核心在于它的选择器，它允许我们方便地选取HTML元素。例如，`$("#id")` 选择ID为指定值的元素，`$(".class")` 选择所有具有特定类名的元素，而`$("tagname")` 则选择所有指定标签...
1. **jQuery的特点** - **简洁性**：jQuery的语法设计易于理解和使用，使得开发者可以快速上手。 - **轻量级**：尽管功能强大，但jQuery的核心库体积小，加载速度快。 - **跨浏览器兼容**：jQuery兼容多种主流...
接下来，"div制作弹出窗口"是指使用jQuery创建模态对话框。这通常涉及到对DOM元素的增删改查操作，例如隐藏和显示指定的div元素。我们可以通过`.show()`和`.hide()`方法控制div的可见性，还可以配合CSS来实现动画...