微客导航 » 文章资讯 » JQuery的加载和选择器用法简单示例

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

2023-08-23 14:14:04 180

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

JQuery加载

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

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





Document


window.onload=function(){
varoDiv=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);
});



这是一个div元素

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

JQuery选择器

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





Title


/*
*jquery可以快速的选择元素，选择规则和css样式相同，使用length属性判断是是否选择成功
*$(#myid)选择id为myid的网页元素
*$('.myclass')选择class为myclass的元素
*$("li")选择所有li元素
*$("#ul1lispan")选择id为ul1元素下的所有li下的span元素
*$("input[name=first]")选择name属性等于first的input属性
*
*对选择集进行过滤
*$("div").has("p")选择包含p元素的div元素
*$('div').not(".myclass")选择class不等于myclass的div元素
*$('div').filter('.myclass')选择class等于myclass的元素
*$('div').eq(5)选择第六个div元素
**/
$(function(){
var$div=$(#div1);
var$div2=$('.box');
var$li=$('.listli');
$div.css({'color':'red'});
$div2.css({'color':'green'});
$li.css({'color':'prink'});
});














div1

div2

div3

对选择集进行过滤

*$("div").has("p")选择包含p元素的div元素
*$('div').not(".myclass")选择class不等于myclass的div元素
*$('div').filter('.myclass')选择class等于myclass的元素
*$('div').eq(5)选择第六个div元素





Title


$(function(){
var$div=$('div')
$div.css({backgroundColor:'red'});
$div.has('p').css({backgroundColor:"green"});
$div.eq(4).css({textIndent:'20px'});
})



1
2
3
4
5
6
7
8

判断是否选择到了元素

JQuery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找到了元素，length等于0就是没找到元素，大于0就是找到了元素

var$div1=$("#div1");
alert($div1.length);

手册上传至github。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐