web前端一览&jQuery

web前端一览

html：裸体
css：好看的衣服            //通常基于bootstrap魔改
JavaScript：动起来            //通常基于JQuery魔改

jQuery

相当于JavaScript的第三方模块。

//下载
https://jquery.com/download/
//引入
<sript src="static/jQuery-3.6.1.min.js"></script>

1 寻找标签

ID选择器
$("#ID")
$("#ID").prev()
$("#ID").next()
$("#ID").next().next()
$("#ID").siblings()
$("#ID").parent()
$("#ID").parent().parent()
$("#ID").children()
$("#ID").children(".p10")
$("#ID").find(".p10")
$("#ID").find("div")
样式选择器
$(".c1")
标签选择器
$("h1")
层级选择器
$(".c1 .c2 a")
多选择器
$("#c3,#c2,li")
属性选择
$("input[name='n1']") 

2 操作标签和值

$("<li>")      //创建标签
.remove();     //删除标签
.removeClass("样式名称");
.addClass("样式名称")
.hasClass("样式名称")
.text()                  //获取文本内容
.text("石永卿")          //添加文本内容
.val()                   //获取用户输入的值
.val("哈哈哈")           //添加用户输入的值
$("li").click(function(){...});        //定义绑定事件の函数