基础1.初次接触Jquery
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的更多相关文章
- 三、jQuery--Ajax基础--Ajax全接触--jQuery中的AJAX
用jQuery实现Ajax jQuery.ajax([settings]) type:类型,“POST”或“GET”,默认为“GET” url:发送请求的地址 data:是一个对象,连同请求发送到服务 ...
- 【jQuery】(1)---初次接触Jquery
1.浅理解Jquery:jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互. 2.D ...
- 6月4日 python学习总结 初次接触jQuery
1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more) 1. 是一个工具,简单方便的实现一些DOM操作 2. 不用jQuery完全可以,但是不明智. ...
- 初次接触：DirectDraw
第六章 初次接触:DirectDraw 本章,你将初次接触DirectX中最重要的组件:DirectDraw.DirectDraw可能是DirectX中最强大的技术,因为其贯穿着2D图形绘制同时其帧缓 ...
- 我与虚拟机的初次接触及初探Liux命令 20155338
初识虚拟机及学习Linux命令的些许收获 虚拟机的安装 这个假期算是第一次正式的接触了虚拟机,以前在平时生活中也有听到过,但是真正自己动手安装虚拟机却是第一次,确实是既紧张又兴奋. 我是依据老师所发的 ...
- 孤荷凌寒自学python第八十三天初次接触ocr配置tesseract环境
孤荷凌寒自学python第八十三天初次接触ocr配置tesseract环境 (完整学习过程屏幕记录视频地址在文末) 学习Python我肯定不会错过图片文字的识别,当然更重要的是简单的验证码识别了,今天 ...
- OC 初次接触
初次接触ObjC时,会发现许多和其它语言不同的地方,会看到很多的+,- ,[ ,] ,@, NS等符号,这些符号在以后的编程中将经常看到,这部分内容在第二节中介绍.先熟悉一下ObjC的代码: #imp ...
- 初次接触json...
这两天发现很多网站显示图片版块都用了瀑布流模式布局的:随着页面滚动条向下滚动,这种布局还会不断加载数据并附加至当前尾部.身为一个菜鸟级的程序员,而且以后可能会经常与网站打交道,我觉得我还是很有必要去尝 ...
- 初次接触GWT，知识点总括
初次接触GWT,知识点概括 前言 本人最近开始研究 GWT(Google Web Toolkit) ,现将个人的一点心得贴出来,希望对刚开始接触 GWT的程序员们有所帮助,也欢迎讨论,共同进步. 先说 ...
随机推荐
- PYTHON文件操作（二）
class file(object) def close(self): # real signature unknown; restored from __doc__ 关闭文件 "" ...
- 天河微信小程序入门《四》：融会贯通，form表单提交数据库
天河在阔别了十几天之后终于又回来了.其实这篇文章里的demo是接着(天河微信小程序入门<三>)后面就做了的,但是因为最近在做别的项目,所以就偷懒没有发出来.放到今天来看,从前台提交数据到数 ...
- PHP中被定义为false的
if($res == false){ echo "未定义通过<br>"; } $res = 0; if($res == false){ echo "0数字通过 ...
- a标签填充父容器
body>div>a{Join} div{ width:150px; height:35px; } a{ display:block; line-height:35px; height:3 ...
- appium 九宫格解锁招商银行手机客户端app
之前研究了一段时间的appium for native app 相应的总结如下: appium测试环境搭建 :ht ...
- 在ashx文件中制作验证码（使用session要继承IRequiresSessionState）
必须继承System.Web.SessionState.IRequiresSessionState接口,才能实现Session读写! System.Web.SessionState的一些接口 IRea ...
- sh3.useradd 添加用户脚本
1.写一个脚本: 添加10个用户user1到user10,密码同用户名,但要求只有用户不存在的情况下才能添加 #/bin/bash # ..};do if id user$i &> /d ...
- 编译osgEarth2.8遇到gdal_vrt.h找不到的问题
在编译plugins osgearth_gdal的ReaderWriterGDAL.cpp的时候可能会遇到这个问题 gdal_vrt.h这个头文件在gdal-1.11.0\frmts\vrt目录下,从 ...
- linux的安装
在CentOS 7中提供了两种桌面"GNOME DESKTOP" 和 "KDE Plasa Workspaces",我们以安装"GNOME DESKT ...
- 深入理解Objective-C：Category
摘要 无论一个类设计的多么完美,在未来的需求演进中,都有可能会碰到一些无法预测的情况.那怎么扩展已有的类呢?一般而言,继承和组合是不错的选择.但是在Objective-C 2.0中,又提供了categ ...