jquery怎么获取当前URl并加上css样式

jquery怎么获取当前URl并加上css样式,第1张

<div id="menu">

<ul>

<li><a href="ahtml"></a></li>

<li><a href="bhtml"></a></li>

<li><a href="chtml"></a></li>

</ul>

</div>

$(document)ready(function () {

//定义url,一般为 li下的a 元素的href的值

var domainUrl = ['ahtml','bhtml','chtml'];

$("#menu li")each(function (i) {

if (windowlocationhreftoLowerCase()indexOf(domainUrl[i]) > 0) {

//onhover是个a被选中的样式,具体你可以自己写

$(this)addClass("onhover");

}

});

});

不明白追问或加Q20011011

$("#box")load("testhtml");

$("input")css("background","blue"); --此效果无效

$("input")live("click",function(){ alert() }); --这个有效,但是需要点击一下input,但我需要的是改变input的样式

思路:

1、引入JQuery,以便于应用选择器

2、用JQuery选择器,找到对应的div(如果这个div无规律,那就没办法了)

3、修改border样式

示例代码

$('div',$("bc_block_td_AID_16714_first_col_td"))css('border-bottom','2px solid');//改成2px

取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下:复制代码代码如下:var p_class = $("p")attr("class"); //获取p元素的class[html]使用attr()方法来设置p元素的class,JQuery代码如下:[code]1 $("p")attr("'class", "high"); //设置p元素的class为 "high"大多数情况下,它是将原来的class替换为新的class,而不是在原来的基础上追加新的class。2 another{ font-style:italic; color:blue; }后在网页中添加一个“追加class类”的按钮,按钮的事件代码如下:1 $("#btn_3")click(function(){2 $("#nm_p")addClass("another"); // 追加样式3 });后当单击“追加class类”按钮时,p元素样式就会变为斜体,而先前的红色字体也会变为蓝色。此时p元素同时拥有两个class值,即"high"和"another"。在CSS中有以下两条规定。1如果给一个元素添加了多个class值,那么就相当于合并了它们的样式。 2如果有不同的class设定了同一样式属性,则后者覆盖前者。 在上例中,相当于给p元素添加了如下样式:复制代码代码如下:1 color : red; / 字体颜色设置红色/2 font-style:italic;3 color:blue;以上的样式中,存在两个“color”属性,而后面的“color”属性会覆盖前面的“color”属性,因此最终的“color”属性的值为“blue”,而不是“red”。移除样式 如果用户单击某个按钮时,要删除class的某个值,那么可以使用与addClass()方法相反的removeClass()方法来完成,它的 作用是从匹配的元素中删除全部或者指定的class。例如可以使用如下的JQuery代码来删除p元素中值为“high”的class:复制代码代码如下:1 $("p")removeClass("high"); //移除p元素中值为"high"的class果要把p元素的两个class都删除,就要使用两次removeClass()方法,代码如下:1 $("p")removeClass("high")removeClass("another");Query提供了更简单的方法。可以以空格的方式删除多个class名,代码如下:1 $("p")removeClass("high another");外,还可以利用removeClass()方法的一个特性来完成同样的效果。当它不带参数时,就会将class的值全部删除,JQuery代码如下:1 $("p")removeClass(); //移除p元素的所有class换样式 JQuery中有一个方法toggle(),JQuery代码如下:1 toggleBtntoggle(function(){2 //元素显示 代码③3 }, function(){4 //元素隐藏 代码④5 })oggle()方法此处的作用是交替执行代码③和代码④两个函数,如果元素原来是显示的,则隐藏它:如果元素原来是隐藏的,则显示它。此时,toggle()方法主要是控制行为上的重复切换。另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。例如对p元素进行toggleClass()方法 *** 作。复制代码代码如下:1 $("p")toggleClass("another"); //重复切换类名“another”不断单击“切换样式”按钮时,p元素的class的值就会在“myClass”和“myClass another”之间重复切换。判断是否含有某个样式 hasClass()可以用来判断元素中是甭含有某个class,如果有,则返回true,否则返回false。例如可以使用下面的代码来判断p元素中是否含有“another”的class:复制代码代码如下:1 $("p")hasClass("another");个方法是为了增强代码可读性面产生的。在JQuery内部实际上是调用了is()方法来完成这个功能的.该方法等价于如下代码:复制代码代码如下:view sourceprint 1 $("p")is("another"); //is(""+class);

你好,根据你的要求,我写了下面的范例代码,请参考:

<script type="text/javascript">

  //记得要先引入jQueryjs框架哦

  $(document)ready(function(){

    if($('name')text()match('您好')){  //如果包含“您好”

      $('box')css('background','yellow');  //box背景为**

    }

    if($('name')text()match('再见')){  //如果包含“再见”

      $('box')css('background','red');  //box背景为红色

    }

  });

</script>

附:完整的HTML范例代码,用浏览器打开即可看到效果。

如还有疑惑,欢迎追问。

思路:在页面设计时就将指定的样式设置为一个class,然后应用到需要的元素上。那么此时可以通过类选择器来获取使用指定样式的个数

$("some_class")length;  // 获取应用了some_class的元素的个数

实例演示:本例将红色设置为一个类 red,并应用到不同的元素中去,然后可以通过上述方法获取应用的个数

创建Html元素

<div class="box">

<span class="red">点击按钮获取应用了红色样式的元素的个数:</span><br>

<div class="content">

    <table>

        <tr><td>1</td><td>2</td><td>3</td></tr>

        <tr><td>4</td><td class="red">5</td><td>6</td></tr>

        <tr><td>7</td><td>8</td><td>9</td></tr>

    </table>

    <ul>

  <li>Glen</li>

  <li class="red">Tane</li>

  <li>John</li>

  <li class="red">Ralph</li>

</ul>

</div>

<input type="button" value="获取应用了红色样式的元素的个数">

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

table{border-collapse:collapse;}

td{width:30px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

li{margin:5px;list-style: none;}

red{color:red !important;}

编写jquery代码

$(function(){ 

$("input:button")click(function() {

alert($("red")length);

});

});

观察效果

css方法:

1、取得第一个段落的color样式属性的值。

$("p")css("color");

2、将所有段落的字体颜色设为红色并且背景为蓝色。

$("p")css({ color: "#ff0011", background: "blue" });<html>

<head>

    <title>JQuery中如何获取样式属性的值</title>

    <script type="text/javascript" src="jqueryjs"></script>

    <style>

        top {

            background: url(Tupianjpg) no-repeat;

            width: 75px;

            height: 90px;

        }

    </style>

    <script type="text/javascript">

        $(function () {

            var url = $("divtop")css("background-image");

            alert(url);

        })

    </script>

</head>

<body>

    <div class="top"></div>

</body>

</html>

以上就是关于jquery怎么获取当前URl并加上css样式全部的内容,包括:jquery怎么获取当前URl并加上css样式、Jquery 怎么获取动态生成的html元素,然后给其中的元素添加样式、用css或者jquery怎么获取蓝色部分div的style的样式,改变border的边框样式等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9681781.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-30
下一篇 2023-04-30

发表评论

登录后才能评论

评论列表(0条)

保存