JQuery基础
jQuery是一个js库,免费开源易用,提供了我们开发中常用到的操作DOM的API,解决了我们使用js操作DOM常遇到的一些问题,强大的选择器,简化我们的操作
入口函数:$(document).ready(function(){}),和JS中的window.onload事件类似
区别:
- window.onload事件只能写一次,绑定多个函数之后,最后一个会覆盖前面所有的事件。
- Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
1.JQuery对象和JS对象
JQuery对象其实就是把DOM对象在重新封装一下,让DOM能使用JQuery方法。简化代码。
- DOM对象转换为JQuery对象:$(DOM对象)
$(document).ready(function () {
var a=document.getElementById("aa");
//将DOM对象封装成JQuery对象
var $a=$(a);
$a.html("你好")
})
- JQuery对象转换为DOM对象
$(document).ready(function () {
var $a=$("#aa")
var a=$a[0];
a.innerHTML="你好";
})
//也可以使用$a.get(0),推荐使用上面的方式。
# 2.JQuery选择器
## ID选择器
利用DOM元素的id属性值来筛选匹配的元素,并以JQuery包装集的形式返回给对象(也就是说返回的是一个JQuery对象,如果匹配到了很多元素,那么就是一个对象集)
```html
var $a=$("#aa")
<p id="aa">测试</p>
元素选择器
通过元素名称来匹配元素。
var $a=$("p")
<p id="aa">测试</p>
类名选择器
通过类名来匹配元素。
var $a=$(".pp")
<p class="pp">测试</p>
层级选择器(后代)
- ancestor descendant (ancestor代表祖先,descendant代表它的所有子孙)
注意有个空格
<script type="text/javascript">
$(document).ready(function () {
var $d=$("#box1 p")
console.log($d);
//输出有两个p1和p2
})
</script>
</head>
<body>
<div id="box1">
<p id="p1">测试1</p>
<div id="box2">
<p id="p2">测试2</p>
</div>
</div>
</body>
- parent>child(parent代表父亲child代表直接后代)
<script type="text/javascript">
$(document).ready(function () {
var $d=$("#box1>p")
console.log($d);
//输出只有一个p1
})
</script>
</head>
<body>
<div id="box1">
<p id="p1">测试1</p>
<div id="box2">
<p id="p2">测试2</p>
</div>
</div>
</body>
- pre+next:用于匹配紧挨着pre的元素,pre和next是同级的
$(document).ready(function () {
var $d=$("#box1+p")
console.log($d);
//输出只有一个p1
/*
var $d=$("#box1~p")
输出的就是2个p1和p2
*/
})
</script>
</head>
<body>
<div id="box1"></div>
<p id="p1">测试1</p>
<p id="p2">测试2</p>
- pre~siblings:用于匹配pre之后所有的同级元素
属性选择器
通过元素的属性作为过滤条件
- [attribute]:匹配给定属性的元素
- [attribute=value]:指定属性的值的元素
<script type="text/javascript">
$(document).ready(function () {
var $d=$("input[name]")
console.log($d);
//输出3个
/*
var $d=$("input[name=in1]")
输出一个
*/
})
</script>
</head>
<body>
<input name="in1" type="text">
<input name="in2" type="text">
<input name="in3" type="text">
</body>
3.JQuery过滤器:与选择器结合使用
简单过滤器
- :first 匹配第一行元素
- :last 匹配最后一行元素
- :even 匹配偶数行
- :odd 匹配奇数行
- :eq(index) 匹配指定索引值
- :gt(index) 匹配大于指定索引值
- lt(index) 匹配小于指定索引
- not(selector) 匹配那些没有被选定的元素
<script type="text/javascript">
$(document).ready(function () {
var $a=$("tr:first")
//匹配的是1111 var $a=$("tr:eq(0)")也是
//var $a=$("tr:gt(0)")匹配2222和3333 var $a=$("tr:not('#1')") 同样
//JQuery中addClass方法是通过设置CSS类来修改元素的样式与之相反的是renoveClass
$a.addClass("aa")
})
</script>
<style>
.aa{
background-color: red;
}
.bb{
background-color: yellow;
}
</style>
</head>
<body>
<table border="1px">
<tr id="1">
<td>1111</td>
</tr>
<tr id="2">
<td>2222</td>
</tr>
<tr id="3">
<td>3333</td>
</tr>
</table>
</body>
内容过滤器
通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选
- :contains(text) 匹配包含给定元素的文本
- :has(selector) 匹配/含有/选择器所匹配元素/的元素
- :parent 匹配含有子元素或者文本的元素
<script type="text/javascript">
$(document).ready(function () {
var $a=$("tr:has('p')")
//匹配的是2222
$a.addClass("aa")
})
</script>
<style>
.aa{
background-color: red;
}
.bb{
background-color: yellow;
}
</style>
</head>
<body>
<table border="1px">
<tr id="1">
<td>1111</td>
</tr>
<tr id="2">
<td><p>2222</p></td>
</tr>
<tr id="3">
<td>3333</td>
</tr>
</table>
</body>
表单对象属性过滤器
通过表单元素的状态属性(被选中,不可用)匹配元素
- :checked 匹配被选中的元素
- :enable 可用
- :disabled 不可用
- :selected 被选中的options元素
<script type="text/javascript">
$(document).ready(function () {
var $a=$("input:checked")
//匹配到的是篮球
console.log($a)
})
</script>
<style>
.aa{
background-color: red;
}
.bb{
background-color: yellow;
}
</style>
</head>
<body>
<input type="checkbox" checked="checked">篮球
<input type="checkbox">足球
<input type="checkbox">羽毛球
<input type="checkbox">乒乓球
</body>
<script type="text/javascript">
$(document).ready(function () {
var $a=$("select option:checked")
console.log($a)
//匹配到的是篮球
})
</script>
<select multiple="multiple">
<option selected>篮球</option>
<option>足球</option>
<option>羽毛球</option>
</select>
子元素过滤器
- :first-child 匹配元素的第一个子元素
- :last-child 匹配元素的最后一个子元素
例:$(“ul li:first-child”):表示无需列表中的第一个列表项
4.节点操作
4.1.创建节点
var $ele =$("<p></p>")创建一个p标签节点
4.2.插入节点
- **append(content)**为所匹配的元素
<script type="text/javascript">
$(document).ready(function () {
var $a=$("#box1")
var $p=$("<p>测试</p>")
$a.append($p)
//append方法也可以识别html标签,append方法是追加的方式。
$a.append("<p>test</p>")
$a.append("hello")
$a.append("world")
})
</script>
</head>
<body>
<div id="box1">
</div>
</body>
在元素外添加:
- after() 为所匹配的元素节点后面添加
- inertAfter() 调用方法的元素添加到方法匹配的元素的后面
- before() (前面)同上
- inertBefore() …
4.3.删除节点
- remove:用于从DOM中删除节点
- empty:将元素的内容清空(元素并不会被删除)
4.4.复制节点
- clone()
<script type="text/javascript">
$(document).ready(function () {
var $a=$("p")
//这里还可以这样写$a.bind("click",function(){})
$a.click(function () {
//this代表当前的DOM对象需要将其转换为JQuery对象
$(this).clone().insertAfter($(this))
//$(this).clone(true).insertAfter($(this))如果是这样的话,clone()会将当前节点的事件处理程序一并复制,也就是说当我点击P标签的时候,p标签下面会复制出相同的p标签,这个p标签同样具有click事件。
})
})
</script>
</head>
<body>
<p>这是一个测试</p>
</body>
4.5.遍历节点
- each() 对 jQuery 对象进行迭代,为每个匹配元素执行函数。
<script>
$(document).ready(function () {
var $a=$("p")
$a.each(function () {
//控制台输出当前p标签的文本
console.log($(this).text())
})
})
</script>
</head>
<body>
<p>这是第一个测试</p>
<p>这是第二个测试</p>
<p>这是第三个测试</p>
<p>这是第四个测试</p>
</body>
5.JQuery对元素css样式修改
5.1.通过修改CSS类类实现
<script type="text/javascript">
$(document).ready(function () {
var $a=$("p:even")
$a.addClass("aa")
var $aa=$("p:odd")
$aa.addClass("bb");
})
</script>
<style>
.aa{
background-color: red;
}
.bb{
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>这是第一个测试</p>
<p>这是第二个测试</p>
<p>这是第三个测试</p>
<p>这是第四个测试</p>
</div>
</body>
5.2.通过修改CSS样式属性实现
- 通过css方法来实现css(“propertyname”,“value”);
<script type="text/javascript">
$(document).ready(function () {
var $a=$("p:even")
$a.css("background-color","red")
var $aa=$("p:odd")
$aa.css("background-color","yellow")
})
</script>
</head>
<body>
<div>
<p>这是第一个测试</p>
<p>这是第二个测试</p>
<p>这是第三个测试</p>
<p>这是第四个测试</p>
</div>
</body>