jQuery操作样式操作行内样式(css)
- css函数的操作和attr函数基本一致，css函数就是直接对标签内的style属性进行设置 。
- css函数设置时设置匹配到的所有元素，取值只获取第一个匹配元素的值
//设置文本颜色$("p").css("color","red");//设置背景颜色：background-color属性要改写为backgroundColor$("p").css("backgroundColor","green");//一次设置多个样式$("p").css({color:"red",fontSize:"20px"});//获取样式的值console.log($("p").css("fontSize"));操作类(class)- 追加样式
//追加一个样式$("p").addClass("active");//追加多个样式，使用空格隔开即可$("p").addClass("active hover");- 移除样式
$("div").removeClass("active");- 判断样式
let flag=$("p").hasClass("active");console.log(flag);//如果p标签有active样式结果为true否则false- 切换样式
//如果p标签有active样式则移除该样式，否则追加active样式$("p").toogleClass("active");jQuery操作DOM创建DOM使用jQuery的工厂函数可以直接创建出jQuery对象的DOM节点
let $p=$("<p title="把你鼠标移开~~">我是jq创建的标签</p>");//此时$p这个dom对象只存在内存中，页面中不存在该元素console.log($p);添加DOM- 添加到选中标签的内部结尾 //$p元素追加到box的标签的内部结尾
$("#box").Append($p);
//该代码和append等价，只是调用者发生了变化
//$p.appendTo($("#box")); - 添加到选中标签的内部开头 //$p元素追加到box标签的内部开头
$("#box").prepend($p);
//该代码和prepend等价，只是调用者发生了变化
//$p.prependTo($("#box")); - 添加到选中标签的自身前面 $("#box").before($p);
- 添加到选中标签的自身后面 $("#box").after($p);
//清空box元素内所有内容，box会保留，返回值是box$("#box").empty();remove删除元素//删除box元素，box消失，返回值是box//remove删除的元素再次追加回页面，其绑定的事件会消失$("#box").remove();detach删除元素//删除box元素，box消失，返回值是box//detach删除的元素再次追加回页面，其绑定的时间会跟随回来$("#box").detach();三种删除元素的区别- empty只会清空元素内部，remove和detach会把元素一起清除
- remove删除的元素其绑定的事件会彻底消失，再次追加该元素到页面时，事件也不会回来
- detach删除的元素其绑定的事件会保留，再次追加该元素到页面时，事件自动绑定
//只复制box节点let $box=$("#box").clone();//复制box节点和其绑定的事件let $box2=$("#box").clone(true);//复制的节点追加到页面中$("#main").append($box);jQuery操作内容- 操作文本内容text()
- 操作标签内容html()
- 操作表单元素的值val()
<body><ul><li><b>选项1</b></li><li><b>选项2</b></li><li><b>选项3</b></li></ul><input type="text" value=https://www.isolves.com/it/cxkf/yy/js/2021-11-12/"你好">
