爱站程序员基地初识jq
1、jq与js的相互转换
<div id=\"app\">simba<div class=\"app\">ace<div class=\"app1\">xixi</div><div class=\"app2\">嘿嘿</div></div><div class=\"app\">ace</div><div class=\"app\">ace</div><div class=\"app\">ace</div></div><div name=\'app\'>haha</div><div name=\'app\'>haha</div>
（1）首先是jquery的引入（可以本地的，也可以是线上的链接）
本人采用的是本地的：
<script src=\"./js/jq.js\"></script>
（2）jQuery主要是将js的方法封装成函数使用。主要就是函数的调用。
js获取DOM：
document.getElementById（）//通过ID名获取元素
document.getElementsByClassName（）//通过类名获取元素
document.getElementsByName（）//通过name获取元素
document.getElementsByTagName（）//通过标签名获取元素
但是目前比较流行且方便：使用的是document.querySelector（）或document.querySelectorAll（），括号中可以是类名，ID名等所有选择器
jq获取DOM：$(’’)括号中可以是类名，ID名等所有选择器
<script>//js转换成jqconsole.log($(document.querySelector(\'.app\')));//jq方法console.log($(\'#app\')[0].offsetLeft); //将jq对象转换成js对象console.log($(\'.app\').get(0).offsetLeft);console.log($(\'[name=\"app\"]\'));console.log($(\'div\'));//获取内容console.log($(\'#app>.app\').html()); //html（）括号中没有参数表示取值// $(\'#app>.app\').html(\'<h1>zero</h1>\') //有参数表示赋值console.log($(\'#app>.app\').html()); //里面可以加html的标签(可以识别)console.log($(\'#app>.app\').text()); //只是纯文本//jq写样式$(\'.app\').css(\'color\', \'red\').css(\'fontSize\', \'30px\')$(\'.app\').css({ //对象方法(可以批量处理)color: \'red\',fontWeight: \'400\',})console.log($(\'.app\').css(\'color\'));//jq加事件$(\'.app\').click(function () { //jq中click可以多次绑定，但是js中onclick只会执行一次alert(1)})$(function () { //加载事件相当于onload事件$(\'[name=\"app\"]\').mouseenter(function () {$(this).css(\'color\', \'red\') //自己判断当前是哪个标签(通过this)}).mouseleave(function () { //可以直接在后面加另外事件，也可以重新写$(this).css(\'color\', \'black\')})//获取后代（方法一：在获取的时候用子集）$(\'#app .app\')//方法二let app = $(\'#app\')app.children()//方法三app.find(\'.app\')//寻找下面的类名为app的元素//获取父集(点击删除父集元素)$(\".app1\").click(function () {//$(this).parent().remove()//只是上一级//$(this).parents(\'#app\').remove()//可以指定删除哪个父集$(this).siblings(\'.app2\').remove()//删除类名叫app2的兄弟元素})})</script>
2、使用jq制作菜单
首先是页面布局
<style>*{margin: 0;padding: 0;list-style: none;}.container{width:830px;/* border: 1px solid red; */margin: 100px auto;}.contain{display: flex;list-style: none;}.contain li{padding: 20px 50px;border-radius: 5px;cursor: pointer;user-select: none;}.contain li.active{background-color: palegreen;color: red;}.content li{display: none;}</style>
<div class=\"container\"><ul class=\"contain\"><li class=\"active\">蛋糕</li><li>奶茶</li><li>蛋糕2</li><li>蛋糕3</li><li>蛋糕4</li><li>蛋糕5</li></ul><ul class=\"content\"><li style=\"display: block;\">蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕蛋糕</li><li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li><li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li><li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li><li>巧克力巧克力巧克力巧克力巧克力巧克力巧克力巧克力</li><li>冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋冰淇淋</li></ul></div>
js部分：
<script>$(function(){$(\'.contain li\').click(function(){//contain下li的点击事件let index=$(this).index()//获取点击时的下标$(this).addClass(\'active\').siblings(\'.active\').removeClass(\'active\')//对于点击的这个li添加active的类名，并将他包含类名active的兄弟身上删除active的类名$(\'.content li\').eq(index).show().siblings().hide()//对于content中的相同下标的li显示，它的兄弟隐藏})})</script>
3、使用jq制作轮播图
<style>* {margin: 0;padding: 0;list-style: none;}.contain {position: relative;display: flex;justify-content: center;align-items: center;margin-top: 100px;}.img li {display: none;}.indexs {display: flex;position: absolute;bottom: 10px;}.indexs li {width: 10px;height: 10px;border-radius: 50%;background-color: white;margin: 0 5px;}.indexs li.active {background-color: red;}.arrow{width: 20px;height: 50px;padding: 50px 20px;line-height: 50px;font-size: 25px;text-align: center;background-color: #333;color: white;position: absolute;user-select: none;}.arrowleft{left: 40px;}.arrowright{right: 40px;}</style>
<div class=\"contain\"><div class=\"arrow arrowleft\"><</div> //左箭头<div class=\"arrow arrowright\">></div> //右箭头<ul class=\"img\"><li style=\"display: block;\"><img src=\"JQuery/https://aiznh.com/wp-content/uploads/2021/06/20210608213937-60bfe399b0d6e.jpg src=\"JQuery/109951165097421077.jpg src=\"JQuery/109951165097407752.jpg src=\"JQuery/https://aiznh.com/wp-content/uploads/2021/06/20210608213937-60bfe399dbf39.jpg src=\"JQuery/https://aiznh.com/wp-content/uploads/2021/06/20210608213938-60bfe39a18a31.jpg class=\"indexs\">//轮播点<li class=\"active\"></li><li></li><li></li><li></li><li></li></ul></div>
<script>$(function () {let i = 0function go(){//制作一个定时器if (++i === 5) i = 0$(\'.img li\').eq(i).show().siblings().hide()$(\'.indexs li\').eq(i).addClass(\'active\').siblings(\'.active\').removeClass(\'active\')//轮播点随着图片的变化而变化}let timer = setInterval(go, 2000)$(\'.indexs li\').mouseenter(function () {clearInterval(timer)//先停止定时器，当鼠标移开的时候定时器再次启动。i = $(this).index()$(\'.indexs li\').eq(i).addClass(\'active\').siblings(\'.active\').removeClass(\'active\')$(\'.img li\').eq(i).show().siblings().hide()//.img中下标为i的li显示，它的兄弟隐藏}).mouseleave(function(){timer=setInterval(go,2000)})$(\'.arrowleft\').click(function(){//左箭头的点击事件，点击一次图片向前移动，轮播点也随着移动clearInterval(timer)if(--i===0)i=4$(\'.indexs li\').eq(i).addClass(\'active\').siblings(\'.active\').removeClass(\'active\')$(\'.img li\').eq(i).show().siblings().hide()timer=setInterval(go,2000)})$(\'.arrowright\').click(function(){clearInterval(timer)if(++i===4)i=0$(\'.indexs li\').eq(i).addClass(\'active\').siblings(\'.active\').removeClass(\'active\')$(\'.img li\').eq(i).show().siblings().hide()timer=setInterval(go,2000)})})</script>
4、jq实现评分
首先引入iconfont图片
<style>* {margin: 0;padding: 0;list-style: none;}.star {font-size: 40px;color: gold;}</style>
<div class=\"contain\"> </div>
<script>let count = 10//总星数let score = 5for (let i = 0; i < count; i++) {let star = $(\'<i/>\').addClass(\'iconfont\').addClass(\'star\')//创建一个类名叫iconfont star的i标签if (i < score) star.addClass(\'iconstar1\')else star.addClass(\'iconstar\')$(\'.contain\').append(star)//将制作出的标签加入contain中}$(\'.star\').mouseenter(function () {let index = $(this).index()//方法表达式一// for (let i = 0; i < count; i++) {// if(i<=index) $(\'.star\').eq(i).addClass(\'iconstar1\').removeClass(\'iconstar\')// else $(\'.star\').eq(i).addClass(\'iconstar\').removeClass(\'iconstar1\')// }//方法二$(\'.star\').each(function (i) {//利用循环，对于当前下标之前的使用iconstar1的类名，其他的还是空心的if (i <= index) $(this).addClass(\'iconstar1\').removeClass(\'iconstar\')else $(this).addClass(\'iconstar\').removeClass(\'iconstar1\')})}).mouseleave(function () {let index = $(this).index()for (let i = 0; i <= count; i++) {if (i < score) $(\'.star\').eq(i).addClass(\'iconstar1\').removeClass(\'iconstar\')else $(\'.star\').eq(i).addClass(\'iconstar\').removeClass(\'iconstar1\')}}).click(function () {score = $(this).index()+1 //点击事件，改变score的值})</script>
