【jQuery入门】(1)---初次接触Jquery
2017-11-24 20:10
330 查看
初次接触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点击文字,文字消失:
4.$(document).ready和window.onload的区别:
首先他们都是自动加载页面,但他们在功能在有一点区别:
$(document).ready 等价于document.onload 但是 不是完全等价的 有所区别
不同点是 使用 $(document).ready 内容都会执行 不会发生覆盖
使用 document.onload 会发生覆盖
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> // 这里有一点注意:如果去除$(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
- 初次接触JQuery
- 初次接触jQuery ---随手记
- CodeSmith快速入门之一:初次接触CodeSmith
- Ruby on Rails 入门之:(17) 初次接触ruby线程
- 初次接触jQuery,实现一些简单的功能
- CodeSmith快速入门之一:初次接触CodeSmith
- 初次接触C语言如何入门
- 初次接触集合
- SQL注入漏洞全接触--入门篇
- zigbee学习笔记4----初次接触zstack
- jQuery入门教程-使用tablesorter插件(表格排序)
- jQuery入门[6]-动画
- JQuery对象与Dom对象初次入坑
- JQuery入门(一)
- jQuery入门指南教程
- jQuery教程-第一章-jQuery入门
- IT咨询顾问:一次吐血的项目救火 java或判断优化小技巧 asp.net core Session的测试使用心得 【.NET架构】BIM软件架构02:Web管控平台后台架构 NetCore入门篇:(十一)NetCore项目读取配置文件appsettings.json 使用LINQ生成Where的SQL语句 js_jquery_创建cookie有效期问题_时区问题
- jQuery入门基础知识学习指南