`

JQuery初感

    博客分类:
  • JS
阅读更多

之前学习了一下JQuery,都说好用其实还真蛮好,现有些肤浅见解。感觉jquery的最基础又最突出的语法符号就是"$"了,这东西在prototype和dwr中就有所体现,但却没jquery中更为特别的自身含意,那就是"$"也表示JQuery对象本身。

基础的常用语法如下:

 

1.根据id获取对象

<!-- 等效于document.getElementById(“userid”)-->
var uid = $("#userid")<!-- 显得较为简洁-->

 

2.获取Dom对象里面的元素

<!-- 获得所有<div>标签下的<p>元素-->
$("div   p");

<!-- 获得所有class属性为container的<div>元素-->
$("div.container");

<!-- 获得<div>标签下id为uid的元素-->
$("div   #uid");

<!-- 获得到context为上下文的table里面所有的连接元素-->
$("table   a" ,  context);

 

3.使Dom对象转化为JQuery对象

var  a = $("#uid");  ----------------------------------------------(1)

var  b = $("<p>Hello world!</p>");  --------------------------(2)

var  c = document.createElement("table");
var tb = $(c);   -----------------------------------------------------(3)

 

4.预装载,代替body标签的onload()事件

<!-- 页面载入时自动执行-->
$(document).ready(function(){
                      alert("I am pre-loading object");
         }
 );

<!-- 等效于下面的onload-->
<body  onload=" alert("I am pre-loading object")">

 

5.事件绑定,有过于<type="button" ... onclick=dosomething()/>的是,jQuery的事件绑定完全把javascript于html代码分离开

$(document).ready(function(){
   $("#confirm").click(function(){    <!-- 将事件响应绑定到id为confirm的button或者连接上面 -->
         alert("I got  clicked");
    });
});

 

6.同一个函数方法实现get和set属性值

var  message = $("#msg").html();<!--获得id为msg的值 -->

$("#msg").html("PKIQ"); <!-- 赋值-->

<!-- 其实$("#id").val()于$("#id").val("value")F用法同上 -->

 

7.利用jQuery实现ajax

<!-- 第一个参数为请求的url,第二个参数为传送的数据,第三个为回调函数(即返回数据后调用的方法)-->
$.get("find.do", {name:pkiq}, deal);

function deal(data){
  //数据处理
}

$.post("update.do", {name:pkiq},deal);

/** **************************************/

function deal(data){
  //数据处理
}

$.get("find.do",{id:111},deal);

/** **************************************/

$("#msg").ajaxStart(function(){
   this.html("启动ajax,发送数据..........");
});

$("#msg").ajaxSuccess(function(){
  this.html("数据处理成功!");
});

 

8.淡入淡出

<!-- 快速渐入-->
$("id").fadeIn("fast");
<!--缓慢推出 -->
$("id").fadeOut("slow");

 

PS: jquery插件给人的感觉很清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。

分享到:
评论

相关推荐

    jQuery源码 jQuery源码 jQuery源码

    jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...

    jquery-3.7.0.min.js(jQuery下载)

    jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...

    jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq

    "jquery-3.4.1_sangat1_jquery3.4.1"可能指的是一个特定的项目或者命名约定,"sangat1"可能是项目名或者是个人开发者的名字,而"jquery3.4.1"是jQuery库的另一种写法,它们都指向同一种资源——jQuery 3.4.1。...

    jquery-3.3.1.js和jquery-3.3.1.min.js

    jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本压缩包中,我们有两个版本的jQuery核心库文件:`jquery-1.12.4.js` 和 `jquery...

    jQuery、jQueryUI及jQueryMobile技巧与示例

    资源名称:jQuery、jQuery UI及jQuery Mobile技巧与示例内容简介:《jQuery、jQuery UI及jQuery Mobile技巧与示例》包括jQuery、jQuery UI、jQuery Mobile以及jQuery插件四部分内容。第一部分介绍jQuery核心库,从...

    最新版JQuery-jquery-3.2.1.min.js

    在本文中,我们将深入探讨最新版的jQuery,即`jquery-3.2.1.min.js`,以及该版本中的一些变化。** ### 1. jQuery 3.x 版本概述 jQuery 3.x 系列是继1.x和2.x后的又一重大更新,它主要关注性能优化、API清理以及对...

    jquery-1.9.1.js 、jquery-1.9.1.min.js 【官方jquery包 js】

    《jQuery 1.9.1:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,以其简洁的API和强大的功能,迅速成为开发者们首选的前端工具之一。本篇文章将深入探讨jQuery 1.9.1版本,包括其核心特性、性能...

    开发工具 jquery-1.11.3.min

    开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-1.11.3.min开发工具 jquery-...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery1.2.3到3.3.1版本都有

    jquery1.2.3到3.3.1版本都有: 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-...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    jquery-3.0.0.js 、jquery-3.0.0.min.js 【官方jquery包 js】

    《jQuery 3.0.0:深入理解与应用》 jQuery,这个JavaScript库,自2006年发布以来,已经成为了Web开发中不可或缺的一部分。它以其简洁的API和强大的功能,极大地简化了DOM操作、事件处理、动画效果以及Ajax交互。在...

    jquery1.7中文手册CHM文档(附jquery1.82chm手册)

    资源名称:jquery1.7 中文手册 CHM文档(附jquery1.82 chm手册)内容简介:因国内jquery中文手册更新太慢了,等了一段时间实在等不下去了,干脆自己动手做一个丰衣足食,时刻更新. 最后感谢Shawphy提供1.4.1版,jehn提供...

    jquery-1.11.3.js 、jquery-1.11.3.min.js 【官方jquery包 js】

    《jQuery 1.11.3:核心特性与应用解析》 jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务,深受前端开发者的喜爱。在这个主题中,我们将深入探讨jQuery ...

    前端+jQuery+实现烟花特效

    前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...

    jquery-2.1.1.js 、jquery-2.1.1.min.js 【jquery包 js】

    《jQuery 2.1.1:JavaScript 的强大库》 jQuery 是一个广泛应用于网页开发的JavaScript库,它的出现极大地简化了JavaScript的复杂性,使得网页交互变得更加简单和高效。在这个主题中,我们将深入探讨jQuery 2.1.1...

    jquery-1.11.0+jquery-UI-1.10.4

    《jQuery 1.11.0与jQuery UI 1.10.4:经典组合的深度解析》 在Web开发领域,jQuery与jQuery UI是两个不可或缺的重要库,它们极大地简化了JavaScript的DOM操作和用户界面设计。本篇将深入探讨jQuery 1.11.0与jQuery ...

    jquery-1.11.1.js 、jquery-1.11.1.min.js 【官方jquery包 js】

    《jQuery 1.11.1:高效前端开发的核心库》 jQuery,作为JavaScript库的代表性作品,一直以来都是Web开发者的重要工具。这个压缩包包含了两个版本的jQuery——`jquery-1.11.1.js`和`jquery-1.11.1.min.js`,它们都是...

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

Global site tag (gtag.js) - Google Analytics