基础1.初次接触Jquery
Posted 雨点的名字
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基础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点击文字，文字消失：
1 <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script> //代表引用，前提是要把jquery放到js文件中 2 <script type="text/javascript"> 3 $(document).ready(function(){ //$()代表就是jquery $(document).ready相当window.onload都是自动加载页面，但他们还是有一点区别的 4 $("p").click(function(){ //代表点击p标签是触发该方法 5 $(this).hide(); //this代表该标签本身，hide是 jquery已经封装好的方法，代表文字消失 6 }); 7 }); 8 </script> 9 <body> 10 <p>如果你点击我,我会消失</p> 11 <p> 点击我 我也会消失 </p> 12 // 这里有一点注意：如果去除$(document).ready(function(){}，但点击时是无法触发click事件的，但是如果把它放到p标签下面它是可以触发的，如下： 13 <p> 点击我 我也会消失 </p> //这样同样可以触发事件，但如果他们调换位置是无法触发的 14 $("p").click(function(){ 15 $(this).hide(); 16 }); 17 //这个的原因我认为，因为放到body里按照顺序执行的，如果你把触发事件放在<p>标签上面，那就是触发事件先执行，但此次连<p>都没有执行到，怎么执行它的监听，而当放在<p>标签下面，但点击p标签就往下执行他的监听
4.$(document).ready和window.onload的区别:
首先他们都是自动加载页面，但他们在功能在有一点区别：
$(document).ready 等价于document.onload 但是 不是完全等价的 有所区别
不同点是 使用 $(document).ready 内容都会执行 不会发生覆盖
使用 document.onload 会发生覆盖
1 <script type="text/javascript"> //两个都会执行 2 $(document).ready(function(){ 3 alert("hello"); 4 }); 5 $(document).ready(function(){ 6 alert("world"); 7 }); 8 <script type="text/javascript"> //会发生覆盖：只执行bbbb，不执行aaaa 9 window.onload=function(){ 10 alert("aaaa"); 11 }; 12 window.onload=function(){ 13 alert("bbbb"); 14 }; 15 </script>
以上是关于基础1.初次接触Jquery的主要内容，如果未能解决你的问题，请参考以下文章