JQuery初感

最新推荐文章于 2022-07-29 20:26:03 发布

kelivenlin

最新推荐文章于 2022-07-29 20:26:03 发布

阅读量80

点赞数

分类专栏： JS 文章标签： jQuery Ajax DWR JavaScript prototype ViewUI

本文链接：https://blog.csdn.net/kelivenlin/article/details/83394681

版权

JS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

之前学习了一下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  οnlοad=" alert("I am pre-loading object")">

5.事件绑定，有过于<type="button" ... οnclick=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及其样式即可以了。其他事情插件全包。

kelivenlin

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录