【jQuery】(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>
【jQuery】(1)---初次接触Jquery的更多相关文章
- 6月4日 python学习总结 初次接触jQuery
1. jQuery是什么?是一个轻量级的,兼容多浏览器的JS库(write less, do more) 1. 是一个工具,简单方便的实现一些DOM操作 2. 不用jQuery完全可以,但是不明智. ...
- 基础1.初次接触Jquery
1.浅理解Jquery:jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents.events.实现动画效果,并且方便地为网站提供AJAX交互. 2.D ...
- jquery插件开发继承了jQuery高级编程思路
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jQuery学习笔记之jQuery的Ajax(3)
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
- Jquery中的(function($){...})(jQuery)
当你第一眼看到“(function($){...})(jQuery)”的时候,你有什么感觉?呵呵呵,我当时还是止不住的从心底里骂了一句——操,这他妈什么劳什子.时过境迁,对于现在无比倚重Jquery的 ...
- jQuery:详解jQuery中的事件(二)
上一篇讲到jQuery中的事件,深入学习了加载DOM和事件绑定的相关知识,这篇主要深入讨论jQuery事件中的合成事件.事件冒泡和事件移除等内容. 接上篇jQuery:详解jQuery中的事件(一) ...
- jQuery CSS操作及jQuery的盒子模型
jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型
- jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
- 初次接触json...
这两天发现很多网站显示图片版块都用了瀑布流模式布局的:随着页面滚动条向下滚动,这种布局还会不断加载数据并附加至当前尾部.身为一个菜鸟级的程序员,而且以后可能会经常与网站打交道,我觉得我还是很有必要去尝 ...
随机推荐
- maya cmds pymel selectType() 选择类型切换
maya cmds pymel selectType() 选择类型切换 import maya.cmds as cmds cmds.selectType( polymeshFace = True ) ...
- JDK解压版制作
今天上 甲骨文 的官网,想下载一个 解压版的 jdk 1.8 结果发现: 没有解压版,只有exe版本.于是就搜索制作方法. 具体就是,双击exe版本,在最后关头要安装的时候, 重点来了! 跟他皮一下 ...
- leetcode刷题五<最长回文子串>
下面是题目的描述 给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为 . 示例 : 输入: "babad" 输出: "bab" 注意: ...
- 分布式存储ceph理论
一.ceph简介 Ceph是一种具有优秀性能,可靠性和可扩展性,统一的分布式文件系统.ceph 的统一体现在可以提供文件系统.块存储和对象存储,分布式体现在可以动态扩展.在国内一些公司的云环境中,通常 ...
- webpack问题列表及解决方案
1.提升webpack打包速度 2.cssloader顺序有先后 3.如何正确引用图片 4.打包后访问不到json文件 5.打包后如何访问项目 6.打包后的文件 7.为什么执行webpack,就可以打 ...
- v-charts修改点击图例事件,legendselectchanged
html: <!--折线图--><ve-line :extend="item.chartExtend" :data-zoom="dataZoom&quo ...
- AngularJS 最常用的八种功能
转载地址:https://zhaoyanblog.com/archives/99.html 第一 迭代输出之ng-repeat标签ng-repeat让table ul ol等标签和js里的数组完美结合 ...
- VMware14 安装CentOS7 实现宿主机ping通虚拟机、虚拟机ping通宿主机、虚拟机能上网且能ping通百度
本文旨在通过通过虚拟机VMware14来安装CentOS7 系统,并配置固定IP来实现在Windows系统中使用Linux环境. 本文目录: 0.本机环境 1.VMware14 初始化 1.1.安装V ...
- 移动UI框架
---恢复内容开始--- 一,框架使用selenium+appium+po+unittest+python 1.其中po表示居于page of boject的思想,unittest是单元测试框架 2. ...
- 201771010126 王燕《面向对象程序设计(Java)》第十六周学习总结
实验十六 线程技术 实验时间 2017-12-8 1.实验目的与要求 (1) 掌握线程概念: ‐多线程 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. 是进程执行过中产生的多条线索. ...