学习jquery框架一点点心得

最新推荐文章于 2020-07-04 12:05:44 发布
最新推荐文章于 2020-07-04 12:05:44 发布
阅读量71 收藏
点赞数
文章标签： javascript xhtml ViewUI
原文链接：http://www.cnblogs.com/walleyekneel/archive/2013/03/24/2979361.html
版权

高手请在此飘过。。。纯属个人娱乐

 

Dom对象与Jquery对象互转

首先，我们约束一下（个人习惯）

Jquery 对象我们可以 以”$”符号开始命名

var $count=jquery对象；

 

dom对象 约束第一个字母为小写开头

var userName=dom对象

 

例子<div id=”test”></div>

代码如下

Var $test=$(“#test”);//jquery对象

Var test=document.getElementById(“test”);//dom对象

 

Dom对象转换jquery对象，方法很简单。请看下面

Var $newTest= $(test);

直接将dom对象放入$(你的dom对象)

 

Jquery对象转换dom对象，可以通过索引index或者get方法转换dom对象

 

1、  索引方法

var test1=$(“#test”)[0];//取出第一个id为test的dom对象

2、  get方法

var test2=$(“#test”).get(0);//取出第一个id为test的dom对象

 

下面看2个demo演示

Demo1：DOM -----点击test按钮改变值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

  <!--  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                //推荐使用原生态操作

                //1、dom操作改变button里的value值

                var myThis = this; //这里是dom对象

                myThis.value = "我是dom";

 

                //2、jquery操作改变button里的value值

                //var $this = $(this); //这里是jquery对象

                //$this.val("我是jquery改变");

 

            });

        });

    </script>

</head>

<body>

 

<input type="text" id="txtName" />

<input id="btn" value="test" name="btn" type="button" />

</body>

</html>

结果：test->我是dom

 

Demo2：jquery---点击test按钮值立刻变为“我是jquery改变”

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

  <!--  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#btn").click(function () {

                //推荐使用原生态操作

                //1、dom操作改变button里的value值

                // var myThis = this; //这里是dom对象

                // myThis.value = "我是dom";

 

                //2、jquery操作改变button里的value值

                var $this = $(this); //这里是jquery对象

                $this.val("我是jquery改变");

 

            });

        });

    </script>

</head>

<body>

 

<input type="text" id="txtName" />

<input id="btn" value="test" name="btn" type="button" />

</body>

</html>

结果：test->我是jquery改变

 

冲突

默认情况下，jquery用$作为自身快捷方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

  <!--  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>-->

    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">

        //这段代码放在这里为了演示冲突

        //为了方便，我自定义$冲突方法,其他类库也有可能定义$符号（如prototype）

        function $(id) {

            return document.getElementById(id);

        }

 

        function btnFun() {

           //这里演示用jq方法获取文本框的值

            alert($("#txtName").val());

        }

       

    </script>

</head>

<body>

 

<input type="text" id="txtName" />

<input id="btn" value="test" name="btn" type="button" οnclick="btnFun();" />

</body>

</html>

这段代码意思很简单，点击按钮弹出文本框值。。

在chrome浏览器发现报了一个这样错误：Uncaught TypeError: Cannot call method 'val' of null

报错原因很明显咯：$符号调用我上面自定义$方法，而js只有value这个属性，没有val()方法

如何解决？

方法一：将其中一个类库$替换其他符号来代替（此方法工作量大，出错几率大，不推荐）

方法二：将所有调用jq方法全部用jQuery,而不是使用$

function btnFun() {

           //这里演示用jq方法获取文本框的值

            alert($("#txtName").val());

 }

修改为以下

function btnFun() {

           //这里演示用jq方法获取文本框的值

            alert(jQuery ("#txtName").val());

      }

 

方法三：

jQuery.noConflict();//将$变量交给上面方法$(或者引入prototype类库)

var $jj= jQuery.noConflict();//将变量交给上面方法$(或者引入prototype类库)，并自自定义$jj

用法：

var $jj= jQuery.noConflict();

function btnFun() {

           //这里演示用jq方法获取文本框的值

            alert($jj ("#txtName").val());

    }

 

 

判断对象是否存在

    <!--判断对象是否存在--->

    <script type="text/javascript">

        jQuery(function () {

           

            //dom判断

            if (document.getElementById("aa")==null) {

                alert("dom判断此对象aa不存在");

            }

 

            //jq判断一（推荐）

            if (jQuery("#aa").length==0) {

                alert("1、jquery判断此对象aa不存在");

            }

            //jq判断二

            if (jQuery("#aa")[0]==null) {

                alert("2、jquery判断此对象aa不存在");

            }

        });

    </script>

转载于:https://www.cnblogs.com/walleyekneel/archive/2013/03/24/2979361.html

weixin_33834679
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery框架心得
12-16
jQuery是继prototype之后又一个优秀的Javascrīpt框架。
jQuery框架学习总结
wildcat的博客
01-06 192
@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全...
Jquery 使用感受
刚哥的博客
12-29 386
有些框架只有明白其中的原来用起来才会觉得方便，之前一直觉得JavaScript 使用是最方便的，而且考虑到所有的Jquery 之类的都是在JavaScript 基础上做的开发，只要学会JavaScript 就行，最近公司项目大量的使用前端技术，再使用Jquery 的过程中突然领悟Jquery 是什么，Jquery 确切的说是一个类，或者可以把它当做一个类，类中有方法，但只有Jquey 对象才会调用...
jQuery学习心得
热门推荐
小疯的代码健身房
01-02 1万+
我第一次接触jquery是在大二下学期的时候，当时我们课程在讲web基础，也就是html css和js那些，我在慕课网（一个不错的在线视频学习网站，现在也在用）上提前学习了jQuery和jQuery-UI。当时只是为了腾出点时间学习更多东西，想走在大多数人前面，时间久了，等到现在上这门课才真正领略到jquery（下面简称JQ）这个前端框架的魅力。 JQ是一个轻量级的js库，它的宗旨是write
jquery框架的js库
10-24
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的J&ouml...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
JQUERY 1.3.2
12-23
jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手 加入其team，包括来自德国的J&...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
JQuery In Action
01-29
in action系列的又一经典，介绍JQuery框架的入门和提升。 JQuery： jQuery由美国人John Resig创建，至今已吸引了...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
jquery-1.2.3.rar
01-15
它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+,...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
jQuery-1.3.js已压缩
09-13
已压缩过的jQuery-1.3.js --------------------- jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多...使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。
jQuery基础学习技巧总结
czl_danny的专栏
05-28 447
1.1、概述随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有 Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。jQuery是继prototype之后
JQuery学习心得
weixin_30299709的博客
08-17 167
项目组用JQuery作为前端的框架，整理学习心得如下： 一、目的通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。 二、使用方法在需要使用JQuery的页面中引入JQuery的js文件即可。例如：引入之后便可在页面的任意地方使用jQuery提供的语法。 三、学习教程及参考资料请参照《jQu...
jQuery框架总结
thebigdipperbdx的博客
04-10 887
What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with a...
jquery的学习个人总结
qq_33061481的博客
05-23 3611
前沿：在接触jquery前，由于受公司几个同事的言论影响感觉jquery非常差，远远比不上原生的js，由此放弃了对jquery的深究。但后面接二连三的项目中用到的前端技术都是基于jquery，这使不懂jquery的我陷入了很大烦恼中。这不得不使我去耐下性子去好好研究下jquery，jquery的学习和运用都是属于比较简单的这里为大家推荐一个jquery的学习网站：http://www.runoob...
jQuery技术学习总结
krain的博客
07-04 232
一、jQuery简介 jQuery是一个JavaScript库，它能够简化JavaScript编程。 jQuery是目前最流行的JS框架。 jQuery能够兼容于目前所有主流的浏览器，包括IE6。 jQuery能够对HTML元素进行选取和修改、实现JavaScript动画、选取操作dom对象、绑定事件、CSS操作、Ajax请求等。 二、第一个jQuery实例 /* $(document)：$是jQuery中的函数名称，document作为函数的参数 作用是将document对象转化为jQ

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值