jQuery基础

1.jQuery与css

如需设置指定的CSS属性,可以添加第二个参数,请使用如下语法:

css("propertyname ", "value");

下面的例子将为所有匹配元素设置background-color值:

$("div").css ("background-color", "#001871");

设置多个css属性的方法

css({"propertyname" : "value", "propertyname" : "value",...});
S("div").css("background-color","pink").css("color","aqua");

2.jQuery的class操作

jQuery addClass()方法

addClass()方法向被选元素添加一个类名。

$("li").addclass("bigger");

jQuery removeClass()方法

removeClass()方法向被选元素移除一个类名。

$("li").removeclass("bigger");

jQuery hasClass()方法

hasClass()方法判断被选元素是否包含这个类名。

alert($("li").hasclass("bigger"));

jQuery toggleClass()方法

toggleClass()方法判断被选元素是否有该类名,如果有就移除他,如果没有,添加他。

$("li").toggleclass ("basic");

案例:

<body>
    <input style="margin-left: 60px;" type="button" value="添加basic类">
    <input type="button" value="添加bigger类">
    <input type="button" value="移除bigger类">
    <input type="button" value="判断bigger类">
    <input type="button" value="切换类">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        $(function() {
            //addclass():给元素添加class,如果元素上已经又其他的classname,
            //那么会将新增加的追加到现有的classname后面
            //找到第一个input标签,绑定单击事件
            $("input:first").click(function() {
                //先获取到所有的li
                //然后再给这些li添加class
                $("ul li").addClass("basic")
            })
            $("input:eq(1)").click(function() {
                //先获取到所有的li
                //然后再给这些li添加class
                $("ul li").addClass("bigger")
            })
            $("input:eq(2)").click(function() {
                $("ul li").removeClass("bigger")
            })
            $("input:eq(3)").click(function() {
                //先获取到所有的li
                //hasClass(类名):用来判断元素上是否又某个class,如果有,则返回true,反之则返回false
                //alert($("ul li").hasclass( "bigger"))
                //如下代码用来判断是否又tigger,如果没有则进行添加
                if (!$("ul li").hasClass("bigger")) {
                    $("ul li").addClass("bigger")
                }
            })
            $("input:eq(4)").click(function() {
                $("ul li").toggleClass("bigger")
            })
        })
    </script>
</body>

3.HTML代码操作

html(可以对HTML代码进行操作,类似于JS中的innerHTML。当该方法用于返回内容时,则返回第一个匹配元素的内容。当该方法用于设置内容时,则重写所有匹配元素的内容。
提示:如只需设置或返回被选元素的文本内容,请使用text()方法。
语法

$(selector).html();//设置内容会自动解析标签

4.文本操作

text()可以获取或设置元素的文本内容。
当该方法用于返回内容时,则返回所有匹配元素的文本内容(会删除HTML 标记)。
 

$(selector).text();//设置内容不会解析标签

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值