1.浅理解Jquery：jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

2.DOM对象和Jquery对象之前的转换

A)DOM转为Jquery对象：

很简单：

 var usernameElement =document.getElementById("username");

       var  $usernameElement=$(usernameElement);  //只要加上$(),把DOM对象放进来就是，同时为了方便调用是什么对象，在变量名前也加$这样好区分

alert($usernameElement.val());                 //既然已经转为Jquery对象，那么取对象的value值也不是之前的点value而是已经封装好的方法.val()来获取value值

B)Jquery转DOM对象：

  两种方法：

  a）

      //(1)Jquery对象是一个数组   可以通过下标[index]方法  来获相应的dom对象

      var $username=$("#username"); //获得jquery对象

//转换为dom对象  根据下标取值即可

       var usernameEle =$username[0]; //转为dom对象

alert(usernameEle.value);

 b）

      //(2)Jquery本身提供  .get(index) 方法获取相应的dom对象

      var $username=$("#username");                 //jquery对象

     var usernameElement2=$username.get(0);   //dom对象

alert(usernameElement2.value);

3.小案例：如何引用jquery点击文字，文字消失：

  <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> //代表引用，前提是要把jquery放到js文件中

     <script type="text/javascript">

         $(document).ready(function(){   //$()代表就是jquery      $(document).ready相当window.onload都是自动加载页面，但他们还是有一点区别的

             $("p").click(function(){    //代表点击p标签是触发该方法

                 $(this).hide();         //this代表该标签本身，hide是 jquery已经封装好的方法，代表文字消失

             });

         });

     </script>

   <body>

       <p>如果你点击我,我会消失</p>

       <p> 点击我  我也会消失 </p>

12  // 这里有一点注意：如果去除$(document).ready(function(){}，但点击时是无法触发click事件的，但是如果把它放到p标签下面它是可以触发的，如下：

 <p> 点击我  我也会消失 </p>  //这样同样可以触发事件，但如果他们调换位置是无法触发的

     $("p").click(function(){

                 $(this).hide();

             });

 //这个的原因我认为，因为放到body里按照顺序执行的，如果你把触发事件放在<p>标签上面，那就是触发事件先执行，但此次连<p>都没有执行到，怎么执行它的监听，而当放在<p>标签下面，但点击p标签就往下执行他的监听

4.$(document).ready和window.onload的区别:

首先他们都是自动加载页面，但他们在功能在有一点区别：

$(document).ready 等价于document.onload  但是 不是完全等价的  有所区别

不同点是 使用 $(document).ready  内容都会执行 不会发生覆盖

使用 document.onload 会发生覆盖

 <script type="text/javascript">    //两个都会执行

         $(document).ready(function(){

            alert("hello");

         });

         $(document).ready(function(){

            alert("world");

         });

 <script type="text/javascript">    //会发生覆盖：只执行bbbb，不执行aaaa

         window.onload=function(){

           alert("aaaa");

         };

         window.onload=function(){

           alert("bbbb");

         };

     </script>

基础1.初次接触Jquery的更多相关文章

  1. 三、jQuery--Ajax基础--Ajax全接触--jQuery中的AJAX

    用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...

  2. 【jQuery】(1)---初次接触Jquery

    1.浅理解Jquery:jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互. 2.D ...

  3. 6月4日 python学习总结 初次接触jQuery

    1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more) 1. 是一个工具,简单方便的实现一些DOM操作 2. 不用jQuery完全可以,但是不明智. ...

  4. 初次接触：DirectDraw

    第六章 初次接触:DirectDraw 本章,你将初次接触DirectX中最重要的组件:DirectDraw.DirectDraw可能是DirectX中最强大的技术,因为其贯穿着2D图形绘制同时其帧缓 ...

  5. 我与虚拟机的初次接触及初探Liux命令 20155338

    初识虚拟机及学习Linux命令的些许收获 虚拟机的安装 这个假期算是第一次正式的接触了虚拟机,以前在平时生活中也有听到过,但是真正自己动手安装虚拟机却是第一次,确实是既紧张又兴奋. 我是依据老师所发的 ...

  6. 孤荷凌寒自学python第八十三天初次接触ocr配置tesseract环境

    孤荷凌寒自学python第八十三天初次接触ocr配置tesseract环境 (完整学习过程屏幕记录视频地址在文末) 学习Python我肯定不会错过图片文字的识别,当然更重要的是简单的验证码识别了,今天 ...

  7. OC 初次接触

    初次接触ObjC时,会发现许多和其它语言不同的地方,会看到很多的+,- ,[ ,] ,@, NS等符号,这些符号在以后的编程中将经常看到,这部分内容在第二节中介绍.先熟悉一下ObjC的代码: #imp ...

  8. 初次接触json...

    这两天发现很多网站显示图片版块都用了瀑布流模式布局的:随着页面滚动条向下滚动,这种布局还会不断加载数据并附加至当前尾部.身为一个菜鸟级的程序员,而且以后可能会经常与网站打交道,我觉得我还是很有必要去尝 ...

  9. 初次接触GWT，知识点总括

    初次接触GWT,知识点概括 前言 本人最近开始研究 GWT(Google Web Toolkit) ,现将个人的一点心得贴出来,希望对刚开始接触 GWT的程序员们有所帮助,也欢迎讨论,共同进步. 先说 ...

随机推荐

  1. mysql：ibdata1和mysql-bin log管理

    MySql ibdata1文件太大如何缩小 MySql innodb如果是共享表空间,ibdata1文件越来越大,达到了30多个G,对一些没用的表进行清空:truncate table xxx;然后o ...

  2. AliSQL的编译使用

    1.下载源码 git clone https://github.com/alibaba/AliSQL.git Linux下编译 2.编译 编译前需要安装好gcc cmake bison等.(如果缺少其 ...

  3. ASP.NET MVC 5 Jquery Validate

    ClientValidationEnabled 在asp.net mvc 5中ClientValidationEnabled默认为TRUE,所以也不需要刻意去设置 应用ValidationAttrib ...

  4. PHP Ueditor 富文本编辑器

    2016年12月11日 08:46:59 星期日 百度的简版富文本编辑器umeditor很久没更新了 全功能版本的配置项跟umeditor还是有区别的, 这里说下ueditor怎么对接到项目中去, 主 ...

  5. c++拷贝构造和编译优化

    #include <iostream> using namespace std; class MyClass { public: MyClass(); MyClass(int i); My ...

  6. yii小细节

    1.main.php增加导航栏严格区分大小写,否则会出现404错误 2.增加'分页'功能---前后台的models里面的search.php 添加 public function search($pa ...

  7. 机器学习caffe环境搭建——redhat7.1和caffe的python接口编译

    相信看这篇文章的都知道caffe是干嘛的了,无非就是深度学习.神经网络.计算机视觉.人工智能这些,这个我就不多介绍了,下面说说我的安装过程即遇到的问题,当然还有解决方法. 说下我的环境:1>虚拟 ...

  8. HTTP 的重定向301,302,303,307（转）

    HTTP 的重定向301,302,303,307(转) (2012-12-11 11:55:04) 转载▼ 标签: 杂谈 分类: 网络 301 永久重定向,告诉客户端以后应从新地址访问.302 作为H ...

  9. 【大数据技巧】日均2TB日志数据在线快速处理之法

    [大数据技巧]日均2TB日志数据在线快速处理之法 http://click.aliyun.com/m/8958/

  10. 关于利用bat文件调用exe批量处理文件下的文件的问题

    for %%i in (E:\radar_20120721\sjz_sa\*.bin) do start/wait radas.exe -i=%%i -o=E:\longjiang\out 找到 文件 ...