是一个模块 一个库 js封装的一个库
导入jq
<script src="jquery.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
$ == Jquery dom对象 _> jq对象 $(dom对象) jq对象 _> dom对象 jq对象[0]
选择器
基本选择器
通用选择器 $('*') 标签选择器 $('div') id选择器 $('#id') 类选择器 $('.class') 组合选择器 $('div.class1') 并集 $('div,p') 交集
层级选择器
后代选择器 $('div span') 子代选择器 $('#li>span') 毗邻选择器 $('#li+span') 弟弟选择器 $('#li~span')
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><ul href="" id="ul"> <li> 1 <ul> <li>11</li> </ul> </li> <li id="l2">2</li> <li> 3<a class="c1" href="www.baidu.com">百度</a></li> <li> 4</li></ul><button id="b1">点击</button><script src="jquery.js"></script><script> console.log($("#ul li")); $("button").click(function () { alert(123) }); var b1 = document.getElementById("b1"); b1.onclick = function () { alert(456) }</script></body></html>
属性选择器
$('[属性]') $('[属性="值') $('[属性!="值') $('[属性^="值') $('[属性$="值') $('[属性*="值')
筛选器
$('选择器:筛选器')
:first 第一个 :last 最后一个 :eq(index) 按照索引 :has(选择器) 包含某个子代的父标签 :not(选择器) 排除
筛选方法
.first() last .eq(index) .siblings() 兄弟 .parent() .children() .next() .nextAll() .nextUntil('#l2') .prev() .prevAll() .prevUntil() .has() 包含某个子代的父标签 .filter('#l2') 当前标签包含选择器 .not(选择器) 不包含
值的操作
.text() 文本 .html() HTML标签
绑定事件
$('button').click(function () { alert(123) })
标签的操作
父标签.append(子标签) // 子标签添加到父标签的子代的最后 子标签.appendTo(父标签) 父标签.prepend(子标签) // 子标签添加到父标签的子代前面 子标签.prependTo(父标签) a.after(b) // 在a标签后面添加b标签 a.before(b) // 在a标签前面添加b标签
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <ul> <li>1</li> <li>2</li> <li>4</li> <li>5</li> </ul></div><button id="b1">添加</button><button id="b2">添加2</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script> var li = $('<li>') li.text('3') $('#b2').click(function () { var li = $('<li>') li.text('3') // $('li:eq(1)').after(li) $('li:eq(2)').before(li) }) // // $('#b1').click(function () { // // var li = $(document.createElement('li')) // // li.innerText = '5' // var num = $('li:last').text() // // console.log(typeof (num)) // num++; // li.text(num) // // console.log(li) // // $('ul').append("<li>5</li>") // // $('ul').append(li) // // li.appendTo($('ul')) // // // $('ul').prepend(li) // li.prependTo($('ul')) // // // }) $('#b1').click(function () { $('ul').prepend(li) }) $('#b2').click(function () { $('ul').append(li) })</script></body></html>
删除
.remove() 删除标签和事件 .detach() 删除标签 保留事件 .empty() 清空标签中的内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <ul> <li>1</li> <li>2</li> <li>4</li> <li>5</li> </ul></div><button id="b1">删除</button><button id="b2">恢复</button><button id="b3">清空</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script> var last; $('#b3').click(function () { // $('li').remove() $('ul').empty() }); $('#b1').click(function () { last = $('li:last').detach() }); $('#b2').click(function () { $('ul').append(last) }); $('li').click(function () { alert($(this).text()) })</script></body></html>
克隆 复制
.clone() 复制标签 .clone(true) 复制标签 也有事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <ul> <li>1</li> <li>2</li> </ul></div><button id="b1">添加</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script> $('#b1').click(function () { var li = $('li:last').clone(true) li.text(Number(li.text()) + 1) $('ul').append(li) }) $('li').click(function () { alert($(this).text()) })</script></body></html>
替换
a.replaceWith(b) // 用b替换a b.replaceAll(a) // 用b替换a a可以是标签 选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <ul> <li>1</li> <li>2</li> </ul></div><button id="b1">替换</button><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script><script> $('#b1').click(function () { var l2 = $('li:last') var li = l2.clone() li.text(Number(li.text()) + 1) // l2.replaceWith(li) li.replaceAll('li:eq(1)') }) $('li').click(function () { alert($(this).text()) })</script></body></html>
属性的操作
.attr('属性') // 获取属性的值 .attr('属性','值') // 设置属性的值 .removeAttr('属性') // 删除某个属性 .prop('checked') // radio checkbox select(option) .prop('checked',true)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><a href="https://www.baidu.com" id="a1" class="c1">百度</a><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></body></html>
值的操作
val()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><form action=""> <input type="text"> <input type="radio" name="sex" value="1"> <input type="radio" name="sex" value="2"> <input type="checkbox" name="hobby" value="唱"> <input type="checkbox" name="hobby" value="跳"> <input type="checkbox" name="hobby" value="rap"> <input type="checkbox" name="hobby" value="篮球"> <select name="hobby2" id="" multiple> <option value="1" selected>唱</option> <option value="2">跳</option> <option value="2">跳</option> <option value="2">跳</option> <option value="2">跳</option> <option value="2">跳</option> <option value="2">跳</option> <option value="3">rap</option> <option value="4">篮球</option> </select></form><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></body></html>
来源：https://www.cnblogs.com/zhang-da/p/12011558.html