jQuery选择器及jquery案例详解(必看)


Posted in Javascript onMay 20, 2016

JQuery选择器

解析:为了更好的或者是更快的从复杂的DOM树中找到我们需要的一类标签

1.层次选择器

<!-- 当点击h2元素时,为#menu下的<span>元素添加色为#09F的颜色背景 -->
<!-- <script type="text/javascript">
$(function () {
$('h2').click(function () {
$('#menu span').css('background-color','#09F');
});
});
</script>-->

2.基本选择器

<!-- 为标签选择器添加样式 -->
<script type="text/javascript">
$(function () {
$('h2').click(function () {
$('h3').css('background-color', '#09F');

});
});
</script>

3.基本过滤选择器

<script type="text/javascript">
$(function () {
$('h2').click(function () {
//$('li:first').css('background-color', '#09F');//第一个
//$('li:last').css('background-color', '#09F');//最后一个
//$('li:not(.three)').css('background-color', '#09F');//class不为three的元素
// $('li:even').css('background-color', '#09F');//索引值为偶数的元素
// $('li:eq(1)').css('background-color', '#09F');//索引值为1的元素
//$('li:gt(1)').css('background-color', '#09F');//索引值大于1的元素
//$('li:lt(1)').css('background-color', '#09F');//索引值小于1的元素
//$(':header').css('background-color', '#09F');//所有标题的元素
$(':focus').css('background-color', '#09F');//获取焦点的元素
});
});
</script>

4.可见性过滤选择器

<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function () {
// $('p:hidden').show();//显示文字
$('p:visible').hide();//隐藏文字
});
</script>
<style type="text/css">
#txt_show
{
display:none;color:#00C;
}
#txt_hide
{
display:block;color:#F30;
}
</style>
</head>
<body>
<p id="txt_hide">点击按钮,我会被隐藏哦~</p>
<p id="txt_show">隐藏的我,被显示了,嘿嘿~</p>
<input type="button" name="show" value="点击显示文字 " />
<input type="button" name="hide" value="点击隐藏文字 " />
</body>

5.属性选择器

<!--改变class属性的值为odds的元素的背景颜色 -->
<script type="text/javascript">
$(function () {
$("h2").click(function () {
$("[class=odds]").css("background-color", "#FFFFFF");
})
});
</script>

Jquery能做什么

访问和操作DOM元素

控制页面样式

对页面事件进行处理

扩展新的jQuery插件

与Ajax技术完美结合

Jquery的优势

体积小,压缩后只有100KB左右

强大的选择器

出色的DOM封装

可靠的事件处理机制

出色的浏览器兼容性

使用隐式迭代简化编程

丰富的插件支持

jQuery的知识的分解:

1.关于window.onload和$(function(){})区别

解析:window.onload等待页面上所有资源(html标签,css,img,js)都加载完成后,才执行,包括(文本素材,图片,js,css)

$(function(){}):等待页面上的标签素材加载完成后就开始执行

第二点:

Window.onload只能调用一次

$(function(){})可以调用多次

2.怎么通过Jquery设置样式

1).通过$(“选择器”).css(“属性名”,”属性值”);

//这里的书写的属性名和css中书写的一致

2).$(“选择器”).html():获取两个标签之间的html代码

3).$(“选择器”).addClass(“属性值”)

可以动态的改变dom文档结构。进而设置样式。

3.DOM对象和Jquery对象的转换

jquery对象转换成 dom对象

jquery提供了两种方法将一个jquery对象转换成一个dom对象,即[index]和get(index)。

ar cr= cr=("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

3.dom对象转换成jquery对象

对于一个dom对象,只需要用$()把dom对象包装起来,就可以获得一个jquery对象了,方法为$(dom对象);

代码:

var cr=document.getElementById("cr"); //dom对象
var cr= cr=(cr); //转换成jquery对象

光棒效果案例:

js代码:

$(function () {
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.style.background = 'red';
};
lis[i].onmouseout = function () {
this.style.background = '';
}
}
});

jQuery的代码:

$(function () {
$('li').mouseover(function () {
$(this).css('background','red');
}).mouseout(function () {
$(this).css('background', '');
})
});

jQuery瀑布流案例:

<script>
var margin = 10;//这里设置间距
var li = $("li");//这里是区块名称
var li_W = li[0].offsetWidth + margin;//取区块的实际宽度(包含间距,这里使用源生的offsetWidth函数,不适用jQuery的width()函数是因为它不能取得实际宽度,例如元素内有pandding就不行了)
function liuxiaofan() {//定义成函数便于调用
var h = [];//记录区块高度的数组
var n = document.documentElement.offsetWidth / li_W | 0;//窗口的宽度除以区块宽度就是一行能放几个区块
for (var i = 0; i < li.length; i++) {//有多少个li就循环多少次
li_H = li[i].offsetHeight;//获取每个li的高度
if (i < n) {//n是一行最多的li,所以小于n就是第一行了
h[i] = li_H;//把每个li放到数组里面
li.eq(i).css("top", 0);//第一行的Li的top值为0
li.eq(i).css("left", i * li_W);//第i个li的左坐标就是i*li的宽度
}
else {
min_H = Math.min.apply(null, h);//取得数组中的最小值,区块中高度值最小的那个
minKey = getarraykey(h, min_H);//最小的值对应的指针
h[minKey] += li_H + margin;//加上新高度后更新高度值
li.eq(i).css("top", min_H + margin);//先得到高度最小的Li,然后把接下来的li放到它的下面
li.eq(i).css("left", minKey * li_W); //第i个li的左坐标就是i*li的宽度
}
$("h3").eq(i).text("编号:" + i + ",高度:" + li_H);//把区块的序号和它的高度值写入对应的区块H3标题里面
}
}
/* 使用for in运算返回数组中某一值的对应项数(比如算出最小的高度值是数组里面的第几个) */
function getarraykey(s, v) { for (k in s) { if (s[k] == v) { return k; } } }
/*这里一定要用onload,因为图片不加载完就不知道高度值*/
window.onload = function () { liuxiaofan(); };
/*浏览器窗口改变时也运行函数*/
window.onresize = function () { liuxiaofan(); };
</script>

以上内容是小编给大家介绍的jQuery选择器及jquery案例的相关知识,希望对大家有所帮助,如果大家想了解更多有关jquery的知识敬请关注三水点靠木网站!

Javascript 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
使用JS进行目录上传(相当于批量上传)
Dec 05 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
jquery实现焦点图片随机切换效果的方法
Mar 12 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
angularjs 缓存的使用详解
Mar 19 Javascript
浅谈vue项目如何打包扔向服务器
May 08 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 Javascript
Jquery $when done then的用法详解
May 20 #Javascript
jQuery添加和删除输入文本框标签代码
May 20 #Javascript
jQuery通过deferred对象管理ajax异步
May 20 #Javascript
Bootstrap3学习笔记(三)之表格
May 20 #Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 #Javascript
Bootstrap3学习笔记(二)之排版
May 20 #Javascript
js获取iframe中的window对象的实现方法
May 20 #Javascript
You might like
终于听上了直流胆调频
2021/03/02 无线电
使用php语句将数据库*.sql文件导入数据库
2014/05/05 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PHP 获取ip地址代码汇总
2015/07/05 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
php+MySql实现登录系统与输出浏览者信息功能
2016/07/01 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
jQuery把表单元素变为json对象
2013/11/06 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
jquery中show()、hide()和toggle()用法实例
2015/01/15 Javascript
了解Javascript的模块化开发
2015/03/02 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
详解微信小程序开发之城市选择器 城市切换
2017/01/17 Javascript
深入理解vue中的$set
2017/06/01 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Vue中使用vue-i18插件实现多语言切换功能
2018/04/25 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
[01:10]DOTA2亚洲邀请赛 征战号角响彻全场
2015/01/06 DOTA
python 实现插入排序算法
2012/06/05 Python
Python语言进阶知识点总结
2019/05/28 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
客户代表实习人员自我鉴定
2013/09/27 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
心理健康活动总结
2014/04/30 职场文书
大学运动会加油稿200字(5篇)
2014/09/27 职场文书
幼儿园卫生保健制度
2015/08/05 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS