《锋利的jQuery》一、认识jQuery

来源：互联网发布：pta编程答案编辑：程序博客网时间：2024/06/05 07:50

title: 《锋利的jQuery》一、认识jQuery
date: 2017-06-13 14:14:24
tags: 锋利的jQuery

window.onload和$(document).ready()

window.onload：必须等网页中所有的内容加载完毕后(包括图片)才能执行，不能同时编写多个。

$(document.ready())：网页中所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完，可以同时编写多个，可以简写为$(function(){})

jQuery对象和DOM对象的转换

jQuery转为DOM对象有两种方法，即[index]和get(index)。

var box = $('#box')[0];var box1 = $('#box1').get(0);

DOM转为jQuery对象,只需要用$()把DOM对象包装起来,$()就是一个jQuery对象的制造工厂。

var box = document.getElementById('box');var $box = $(box);

$快捷方式的更改

$是jQuery的快捷方式，为防止冲突，也可以自定义这个快捷方式。

交给其他js库

假如jQuery库在其他库之后引入，在其他库和jQuery库加载完成后就可以使用jQuery.noConflict()将变量$的控制权交给其他js库，如果先引入jQuery就不需要jQuery.noConflict()方法，直接写$即可。

<body>    <p id="pp">Test-prottype</p>    <p>Test-jQuery</p>    <!--引入prototype-->    <script src="lib/prototype.js"></script>    <!--引入jQuery-->    <script src="../jquery1.9.1.min.js"></script>    <script>        jQuery.noConflict();   // 将变量$的控制权移交给prototype.js        jQuery(function(){     // 使用jQuery            jQuery('p').click(function(){                    alert( jQuery(this).text() )            })        })        $('pp').style.display = 'none';         // 使用prototype隐藏元素    </script></body>

防止`$`冲突

第一种方法：想确保jQuery不会与其他库冲突，可以自定义一个快捷方式。

<body>    <p id="pp">Test-prottype</p>    <p>Test-jQuery</p>    <!--引入prototype-->    <script src="lib/prototype.js"></script>    <!--引入jQuery-->    <script src="../jquery1.9.1.min.js"></script>    <script>        var $j = jQuery.noConflict();       // 自定义一个快捷方式        $j(function(){          // 利用刚自定义的快捷方式使用jQuery            $j('p').click(function(){                alert($j(this).text());            })        })        $('pp').style.display = 'none';         // 使用prototype隐藏元素    </script></body>

第二种方法：如果不想自定义名称，同时又想避免冲突可以这样。

<body>    <p id="pp">Test-prottype</p>    <p>Test-jQuery</p>    <!--引入prototype-->    <script src="lib/prototype.js"></script>    <!--引入jQuery-->    <script src="../jquery1.9.1.min.js"></script>    <script>        jQuery.noConflict();   // 将变量$的控制权移交给prototype.js        jQuery(function($){     // 将$通过参数传入            $('p').click(function(){                alert($(this).text());            })        })         $('pp').style.display = 'none';         // 使用prototype隐藏元素    </script></body>

判断是否获取到了某元素

在原生javascript中通过这样来判断页面中是否有这个元素

if(document.getElementById('tt')){    document.getElementById('tt').style.color = 'red';}

在jQuery中因为$()获取的是一个对象，所以不能直接判断这个对象是否存在

if($('#tt')){    // 这里将永远判断为true，因为jQuery对象一直存在}

应该这样判断

if($('#tt').length > 0){}

或者

if($('#tt')[0]){}

阅读全文

0 0