JQuery的加载和选择器用法简单示例

2020-05-24 21:38:26易采站长站整理

本文实例讲述了JQuery的加载和选择器用法。分享给大家供大家参考,具体如下:

JQuery加载

一般开发中不用原生的JavaScript而是用JQuery,开发效率比较高。

下面程序是原生和JQuery库的比较程序


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
alert('原声弹出的' + oDiv);
};
$(document).ready(function () {//这是jquery的写法,作用和原生js的window.onload作用是一样的
var $div = $('#div1');
alert('jquery弹出的' + $div);
});
//下面是上面jQuery完整写法的简写
$(function () {
var $div = $('#div1');
alert('jquery简写弹出的' + $div);
});
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>

虽然原生的js函数是写在前面的,但是实际上JQuery弹出之后才会弹出js的alert,因为window.onload是等标签加载完成之后,再渲染完之后才允许。ready是等标签加载完之后就运行,所以要快。

JQuery选择器

    * jquery可以快速的选择元素,选择规则和css样式相同,使用length属性判断是是否选择成功
        * $(#myid) 选择id为myid的网页元素
        * $(‘.myclass’) 选择class为myclass的元素
        * $(“li”)   选择所有li元素
        * $(“#ul1 li span”)  选择id为ul1元素下的所有li下的span元素
        * $(“input[name=first]”)    选择name属性等于first的input属性
    *


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><!--不能直接撬开这里写-->
<script type="text/javascript">
/*
* jquery可以快速的选择元素,选择规则和css样式相同,使用length属性判断是是否选择成功
* $(#myid) 选择id为myid的网页元素
* $('.myclass') 选择class为myclass的元素
* $("li") 选择所有li元素
* $("#ul1 li span") 选择id为ul1元素下的所有li下的span元素