jQuery操作CSS

最新推荐文章于 2024-08-16 17:20:49 发布

午睡的风

最新推荐文章于 2024-08-16 17:20:49 发布

阅读量356

点赞数

文章标签： css jquery javascript

本文链接：https://blog.csdn.net/MX22724/article/details/128825352

版权

本文介绍了jQuery中的css()方法用于设置或获取元素样式，以及append()、prependTo()等用于元素操作。还讨论了jQuery的事件处理，包括鼠标事件如mouseover、mouseout，键盘事件如keydown、keyup，以及表单事件。最后提到了jQuery的动画效果，如show()、hide()和滑动效果。

摘要由CSDN通过智能技术生成

jQuery中的css()方法

css()方法设置或返回被选元素的一个或多个样式属性返回指定的css属性的值，参照下面的列子：

<script src="js/jquery-3.6.0.js"></script>
    <style>
        div{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div>第一</div>
    <button id="one">获取元素</button>
    <button id="two">换红色</button>
    <button id="there">换蓝色</button>
    <button id="four">文字变大</button>
</body>
<script>
    $(function(){
        $("#one").click(function(){
            alert($("div").css("background-color"))
        })
        $("#two").click(function(){
            $("div").css({"background-color":"red"})
        })
        $("#there").click(function(){
            $("div").css("background-color","blue")
        })
        $("#four").click(function(){
            $("div").css("font-size","100px")
        })
    })
</script>

jQuery添加元素：
append( )方法在被选元素结尾插入指定内容。（在父元素里添加一个子元素）

appendTo( )方法在被选元素的结尾插入HTML元素。（把一个子元素添加到父元素里）

preprnd( )方法在被选元素的开头插入指定内容。

preprndTo( )方法在被选元素的开头插入HTML元素。

after( )方法在被选元素后插入指定的内容。（插入的内容在父元素的后面）

before( )方法在被选元素前插入指定的内容。（插入的内容在父元素的前面）

jQuery删除元素：

jQuery提供了如下删除节点的方法：remove()、empty()。

empty()方法移除被选元素的所有子节点和内容。

remove()方法移除被选元素，包括所有的文本和字节点。该方法也会移除被选元素的数据和事件

jQuery替换节点：

replaceWith( )和replaceAll( )用于替换某个节点。

replaceWith( )方法把被选元素替换为新的内容。

replaceAll( )方法把被选元素替换为新的HTML元素。

jQuery是为事件处理特别设计的

jQuery事件的分类：

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件。常用的鼠标事件有：

click(),dblclick(),mouseover(),mouseout(),hover(),参照下面列子：

 <script src="js/jquery-3.6.0.js"></script>
    <style>
        li{
            list-style: none;
            float: left;
            margin:10px;   
        }
        .abc{
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul id="one">
        <li>百度</li>
        <li>百度</li>
        <li>百度</li>
        <li>百度</li>
        <li>百度</li>
    </ul>
</body>
<script>
    $(function(){
        $("li").mouseover(function(){
            $(this).addClass("abc").siblings("li").removeClass("abc")
        })
    })
</script>

键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用的键盘事件有：

keydown()	触发或将函数绑定到指定元素的keydown事件。
keyup()	触发或将函数绑定到指定元素的keyup事件。
keypress()	触发或将函数绑定到指定元素的 keypress事件。

表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事