jquery选择器案例分享

其中选择器都已经注释，需要测试哪个打开注释即可观察效果！！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script><script type="text/javascript">$(function(){//标签选择器//$("p").css("color","red");//类选择器//$(".p1").css("background","red");//ID选择器//$("#box").css("border","1px solid black").css("height","400px");//并集选择器//$("p,span").css("color","blue");//全局选择器//$("*").css("color","pink");//后代选择器//$("#box p").css("color","red");//子选择器：//$("#box>p").css("color","red");//相邻元素选择器//$(".p2+p").css("color","red");//同辈元素选择器//$(".p2~p").css("color","red");//属性选择器//给包含name的元素表单里面赋值//$("[name]").val("已经赋值");//选择name属性的值为text的赋值//$("[name='text']").val("已经赋值");//给name属性的值不是text的赋值//$("[name!='text']").val("已经赋值");//给name属性的值以p开头的//$("[name^='p']").val("已经赋值");//给name属性的值以e结尾的//$("[name$='e']").val("已经赋值");//给name属性的值包含e的//$("[name*='e']").val("已经赋值");//给包含type属性等于password和name=phone的input属性赋值//$("input[name='password'][type='password']").val("已经赋值");//过滤性选择器//第一个p元素的字体为红色//$("p:first").css("color","red");//最后一个p元素的字体为红色//$("p:last").css("color","red");//p里面class不是p3的字体为红色//$("p:not(.p3)").css("color","red");//p里面偶数的字体为红色(从0开始)//$("p:even").css("color","red");//p里面奇数的字体为红色(从1开始)//$("p:odd").css("color","red");//p里面索引等于3的字体为红色(从0开始)//$("p:eq(3)").css("color","red");//p里面索引大于2的字体为红色(从0开始)//$("p:gt(3)").css("color","red");//p里面索引小于2的字体为红色(从0开始)//$("p:lt(3)").css("color","red");//将网页中的所有标题颜色//$(":header").css("color","red");//获取网页中聚焦点的元素//$("[name='password']").focus();//$(":focus").css("color","red");})</script></head><body><header>这是头部分</header><div id="box"><p class="p1">第一个p标签<span>这是p1里面的span标签</span><p>这是p1里面的p标签</p></p><p class="p2">第二个p标签</p><p class="p3">第三个p标签</p><p class="p4">第四个p标签</p><p class="p5">第五个p标签</p><span>这是一个span标签<p>这是span里面的p标签</p></span><h2>这是一个h2标签</h2>属性选择器：用户名：<input type="text" name="text" value="" />密码：<input type="password" name="password" value="" />电话：<input type="text" name="phone" value="" />电子邮件：<input type="text" name="email" value="" /></div></body>
</html>

jquery选择器案例分享相关推荐

四大常见的jQuery选择器+案例
常见的jQuery选择器前言四大选择器一.jQuery基础选择器 1.ID选择器 2.全选选择器 3.类选择器 4.标签选择器 5.并集选择器 6.交集选择器层级选择器 1.子代选择器 2.后 ...
jQuery选择器案例之——index.js
$(function(){//alert('a');///基本选择器//id选择器//$("#div1").css("background","red ...
jQuery选择器经典案例
jQuery选择器经典案例具体讲解内容参照上一篇: 选择器详细讲解基本选择器 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&qu ...
JQuery-学习笔记07【高级——JQuery高级案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JQuery-学习笔记04【基础——JQuery基础案例】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
JQuery-学习笔记02【基础——JQuery选择器】
Java后端学习路线笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
20150303+JQuery选择器-02
20150303+JQuery选择器-02 三.文档处理插入删除复制替换包裹查找 1.插入操作--内部插入 jQuery <div> jQuery hello jQuery&l ...
jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
jQuery（一）—— jQuery 概述 / jQuery 选择器 / jQuery 样式操作 / jQuery 效果
原以为 jQuery 不需要学习,但是接触了一些 VUE 框架,发现用到了好多 jQuery 的知识,于是返回来重新学习.本系列笔记大概分为三篇,陆续更新. 参考:W3school -- jQuery ...

jquery选择器案例分享

jquery选择器案例分享相关推荐

最新文章

热门文章