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)JqueryDOM对象:

  两种方法:

  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).readywindow.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>

【jQuery】(1)---初次接触Jquery的更多相关文章

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

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

  2. 基础1.初次接触Jquery

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

  3. jquery插件开发继承了jQuery高级编程思路

    要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...

  4. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  5. Jquery中的(function($){...})(jQuery)

    当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...

  6. jQuery:详解jQuery中的事件(二)

    上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...

  7. jQuery CSS操作及jQuery的盒子模型

    jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

  8. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  9. 初次接触json...

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

随机推荐

  1. HTML5+CSS3 1

    html5标准模板 <!DOCTYPE html>   //<!DOCTYPE>标签 向浏览器声明当前文档使用的HTML版本,<!DOCTYPE html>适用于所 ...

  2. Android 博客导航

    Android 博客导航 一. 基础知识 Android 常用知识点 Android 常见问题解决 Android 常用控件 控件常用属性 Material Design 常用控件 二.常用知识点 动 ...

  3. MySql分割字符串【存储过程】

    MYSql没有表变量,通过函数无法返回表. 参考网址:https://bbs.csdn.net/topics/330021055 DELIMITER $$ USE `数据库`$$ DROP PROCE ...

  4. JS精度问题(0.1+0.2 = 0.3吗?)

    一.引出问题 0.1+0.2 = 0.3吗?在JS中是这样的吗?我们写个测试代码不就知道了吗? 结果出人意料,并不像我们所想象的那样.那么这到底是为什么呢? 二.原因分析 JS浮点数存储机制: 三.解 ...

  5. 使用ant编译zookeeper源码

    1. 安装Ant Ant下载地址:http://ant.apache.org/bindownload.cgi 解压即可. 注意如果不配置环境变量的话需要使用绝对路径,我配置了. 开始我ant跑错了 U ...

  6. 解决Idea无法提示代码、不检查语法的方法

    今天打开Idea做项目的时候,java代码图标出现异常(不是以前的C图标),所有java文件都只有两种颜色,百度查了一下,Idea有一个叫power save mode,在file -> Pow ...

  7. C#封装的websocket协议类

    关于VB版之前已经写了,有需要可以进传送门<VB封装的WebSocket模块,拿来即用>,两个使用都差不多,这里简单概述一下: 连接完成后,没有握手就用Handshake()先完成握手之后 ...

  8. SQLServer表、列备注管理

    在开发时,为了方便,在SQL SERVER库内对表名.列名进行备注,但在DB部署客户时,想一次清理上述备注值. 特编写如下 SQL,一次清除上述备注内容: declare @table nvarcha ...

  9. Java_流程控制

    介绍: java的流程控制结构有三种:顺序.选择.循环            顺序结构,就是从头到尾依次执行每条语句的操作. 选择结构,也称条件控制,是指根据表达式的值有选择的执行. 循环结构,也称回 ...

  10. 【原创】XAF CriteriaOperator 使用方式汇总

    1.CriteriaPropertyEditor [EditorAlias(EditorAliases.CriteriaPropertyEditor)] [CriteriaOptions(" ...