JQuery基本知识
JQuery目前企业中用的最多的一种JS框架,对常用的功能进行封装和简化
JQuery使用
需要有JQuery类库文件 引入
页面加载完之后在JS文件中写$(function(){});
用选择器查找对象$("#d1") #(".d1")
执行事件 $("#d1").click
$(function () {
$("#btn1").click(function () {
alert("hello world");
});
});
js写法
document.getElementById("#d1").onclick=function(){alert("hello world");}
对象互转*
JQuery对象转DOM对象 JQuery对象[0]
$("#btn1")[0].onclick
DOM对象转JQuery对象
$(document.getElementById("#d1")).click $(DOM对象)
常用选择器
class选择器： class
$(".c1").css("color","#f00");设置一个样式属性的值。
标签选择器
$("div")
ID选择器 id
$("#d1")
奇偶数选择器 $("#tab tr:odd") $("#tab tr:even")
示例：隔行变色
html
<table id="tab"> <tr><th>姓名</th><th>学号</th><th>年龄</th></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> <tr><td>张三</td><td>001</td><td>23</td></tr> </table>
css
table { height:500px; width:600px; border-collapse:collapse; } th,td { text-align:center; border:1px solid #ccc; }
js
$(function () { $("#btn1").click(function () { $("#tab tr:odd").css("background-color", "#fceded"); $("#tab tr:even").css("background-color", "#f79898"); }); });
父元素中元素的第几列
$("#tab td:nth-child(1)") td第一列
子元素 不包括孙元素
$("#d1>a")
属性选择器
找到设置某个属性的元素
$("#d1 a [title]")
<div>
<a href="">你好1</a>
<a href="">你好2</a>
<a href="http://222" title="aaa">你好3</a>
</div>
找到设置某个属性值的元素，并且是http开头的
$("#d1 a[href^=http]")
结尾
$("#d1 a[href$=http]")
等于
$("#d1 a[href=’http’]")
包含
$("#d1 a[href *=http]")
需求：超连接相当多的时候，所有pdf结尾的显示红色
去掉文本框中前后的空格
<input id="txt" type="text">
var sInput=$trim($("#txt").val());
去掉文本框中的空格
$(function () { $("#btn1").click(function () { var sInput = $("#txt").val(); var aInput = sInput.split(''); for (var i = 0; i < aInput.length; i++) { if (aInput[i] == ' ') { sInput = sInput.replace(" ", ""); } } $("#txt").val(sInput); }); });
包含选择器
$("li:has(a)") li中包含 a标签的li
<li><a></<a></li>
位置选择器
$("p:first")整个页面里的第一个p元素
$("p:last")整个页面里的最后一个p元素
$("p:first-child")父元素的第一个p标签
<body>
<p></p>
<div><span></span><p></p></div>
</body>
$("p:first-child")父元素的最后一个p标签
<body>
<p></p>
<div><span></span> <p></p> </div>
</body>
父标签下元素的偶数行
$("#d1 p:nth-child(odd)") id为d1下的p标签的偶数行
<div id="d1">
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
<p>aaa</p>
</div>
$("p :odd")整个页面中P标签的偶数行
索引选择器
$("#d1 p").eq(位置) 第三行索引是2 可以写括号里
$("#d1 p:gt(3)") 第三行索引后
$("#d1 p").eq(位置).siblings() 兄弟
$("#d1 p").eq(位置).prev()前面一个
$("#d1 p").eq(位置).next()后面一个
$("#d1 p").eq(位置).parent().attr("id") 获取父亲的某个属性
表单选择器
$("input [type='button']") 获取type=button的input
$("input [type='text']") 获取type=text的input
简写
$(":button")
$(":text")
$(":checkbox)
$(":disabled")所有被禁用的元素
$(":enable")所有没有被禁用的元素
$(":file")所有上传文件
$(":input")所有input元素
$(":selected")所有下拉菜单被选中的项
$(":visible")所有可见元素
$(":submit")所有提交按钮
$("div:contains(foo)")所有包含了文本"foo"的元素
反向过滤
$("input:not(:text)") 所有的input不是文本框的
$("input").not(:text)也是可以的
$("div p").not(:hidden)针对前面的结果集，不能再后面再加标签