day25css方法 jquery效果样式等操作

最新推荐文章于 2022-04-18 16:18:38 发布

qq_38068491

最新推荐文章于 2022-04-18 16:18:38 发布

阅读量126

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83686421

版权

一、css方法（）

元素.css("样式")//获取样式（可以获取行内设置的样式，也可以获取上style里设置的css样式）

元素.css("样式","值")//设置样式

二、方法index（）获取当前元素所有序列的下。标注：下标包含同级其它元素。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

<p></p>

</ul>

</body>

</html>

alert($("#id3").index());//4

alert($("#id3").index("li"));//3

</script>

三、运动（效果）方法：里面都可以加slow，fast

1)基本 show();hide(); toggle（）跟show效果一样

2）滑动 sideUp();sideDown(); sideToggle();

3)淡入淡出 fadeIn();fadeOut(); fadeToggle()

4）透明度 fadeTo("时间"，0.34（透明度）);

案例：二级导航

<!DOCTYPE html>

<html>

<head>

padding: 0;

margin: 0;

}

div{

width: 600px;

margin: auto;

margin-top: 100px;

}

ul{

list-style: none;

}

.oUl{

width: 600px;

}

.oUl>li{

width: 200px;

float: left;

}

.oUl>li a{

display: block;

text-align: center;

line-height: 30px;

box-shadow: 1px 2px 2px 1px brown;

}

.oUl>li a:hover{

background: saddlebrown;

color: white;

}

.oUl>li ul{

border: 1px solid salmon;

background: #CCCCCC;

display: none;

}

.oUl>li ul li{

line-height: 30px;

text-align: center;

}

.oUl>li ul li:hover{

background: sandybrown;

}

</style>

</head>

<body>

<div>

<p></p>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

<li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

</script>

$(function(){

$(".oUl>li").mouseover(function(){

//this是一个DOM对象，不能用this来调用jquery中方法

//index()可以获取元素下标

var index=$(this).index(".oUl>li");

// $(".oUl li ul:eq("+index+")").css("display","block");

// $(".oUl li ul:eq("+index+")").show(500);

// $(".oUl li ul:eq("+index+")").stop().slideDown("fsat");

$(".oUl li ul:eq("+index+")").fadeIn();

// $(".oUl li ul:eq("+index+")").fadeTo("100",0.8);

})

$(".oUl>li").mouseout(function(){

var index=$(this).index(".oUl>li");

// $(".oUl li ul:eq("+index+")").css("display","none");

// $(".oUl li ul:eq("+index+")").hide(500);

// $(".oUl li ul:eq("+index+")").stop().slideUp("fast");

$(".oUl li ul:eq("+index+")").fadeOut();

// $(".oUl li ul:eq("+index+")").fadeTo("100",0);

})

四、js对象与jq对象互相转换

DOM对象转成jquery对象：$(DOM对象);

jquery对象转成js对象(转成jquery对象设置样式必须按照js中的格式去设置)

方案一： $()[下标]

$("#box")[0].style.color = "blue";

方案二： $().get(下标)

$("#box").get(0).style.color = "blue";

$(DOM对象).(不用加on)事件（function(){

代码块；

}）;

<!DOCTYPE html>

<html>

<head>

</head>

<body>

box

</div>

</body>

</html>

//$("#box").css("color","red");

$("#box")[0].style.color = "blue";

$("#box").get(0).style.color = "blue";

$(document).ready(function(){})；

window.onscroll = funciton(){

}//js对象

$(window).scroll(function(){

})//jquery对象

</script>

五、筛选选择器

<body>

<ul>

</ul>

<ul>

</ul>

</body>

1）eq（index|-index）；

$("li").eq(3).css("color","red");

2）first()

$("li").first().css("color","red");

页面中所有li元素中的第一个

3）last()

$("li").last().css("color","red");

页面中所有li元素中的最后一个

4）hasClass(class) 返回true

$("li").mouseover(function(){

if($(this).hasClass("a")){

$(this).css("color","red");

}

})

5）filter() 过滤满足条件的

$("li").filter(function(index){

return index==2;

}).css("color","blue");

6）is（）

alert($(".a").is("a"));//false

7）not()

$("li").not(".a").css("color","blue");

8）slice（）

$("li").slice(2,3).css("color","red");

六、查找选择器

<body>

<ul>

</ul>

</body>

1）children（）

$("ul").children("li").css("color","red");

2）find（）

$("ul").find("li").css("color","red");

3）next（）有问题

4）nextAll（）

$("li").nextAll().css("color","red");

5）nextUnit（）

$(".a").nextUntil(".b").css("color","red");

6）siblings（）

$(".a").siblings().css("color","blue");

七、样式操作

为元素添加一个样式类

$("#box").addClass("box");

没有class属性则直接添加；有的话，就在后面添加一个（不会覆盖原来属性值）

如：class=“box a”；

2)删除样式类

$("#box").removeClass("a");

后来添加的样式也可以删除。原先在行内添加的样式类也可以删除

案例siblings()实现选项卡功能

<!DOCTYPE html>

<head>

<style>

margin: 0;

padding: 0;

list-style-type: none;

}

.warp{

width: 360px;

height: 400px;

border: 1px solid #b6b6b6;

margin: 50px auto;

}

#btn{

width: 360px;

height: 40px;

}

#btn li{

float: left;

width: 118px;

margin: 0 1px;

background: #ddd;

height: 40px;

line-height: 40px;

text-align: center;

}

#btn .active{

background: #b6b6b6;

}

#show{

width: 360px;

height: 460px;

}

#show li{

width: 360px;

height: 460px;

display: none;

}

</style>

</head>

<body>

<div>

</ul>

</ul>

</div>

</body>

</html>

$("#btn li").click(function(){

$(this).addClass("active").siblings().removeClass("active");

$("#show li").eq($(this).index()).show().siblings().hide();

})

</script>

八、属性操作

1）attr("属性")：获取属性值

alert($("#box").attr("class"));//box

2）attr（“属性”，“属性值”）：设置属性值可以添加自定义属性，也可以设置原属性（设置原属性时，覆盖原来属性值了）

$("#box").attr("aaa","bbb");//为id为box的元素添加了一个aaa属性

alert($("#userName").attr("disabled","disabled"));//文本框禁用

3）prop("checked")/prop("checked",true/false)：获取或设置返回值为boolean的属性

注意，attr不能操作返回值为boolean类型的属性，如checked / selected

案例：全选与全不选

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="checkbox" name="all"/>全选

</body>

</html>

$(function(){

$("input[name=all]").click(function(){

$("input[name=sl]").prop("checked",$(this).prop("checked"));

})

var flag=true;//代表所有的都被选中了

$("input[name=sl]").each(function(index,item){

if(!$(item).prop("checked")){

flag=false;//最少有一个没被选中

return;

}

})

$("input[name=sl]").click(function(){

if(flag){

$("input[name=all]").prop("checked",true);

}else{

$("input[name=all]").prop("checked",false);

}

})

</script>

九、内容操作

如果括号中没有参数，表示获取内容，有参数，表示设置内容

1）操作html标签

html(“<tr>”)

text()

获取值：

alert($("#box").html());//这是薄晓

alert($("#box").text());//这是薄晓

设置值:

$("#box").html("<h1>kil</h1>");//可加标签

$("#box").text("iii");

2）操作表单元素

val( ）

获取值：

alert($("input").val());

设置值：

$("input").val("hhh");

十、文档操作（DOM操作）

<body>

<p>这是一个p</p>

</div>

</body>

dom对象：var p=document.getElementsByTagName("p")[0];

// $("#box").append(p);//哈哈哈这是一个p

1）append(字符串/jquery对象/DOM对象) 在父元素下添加子元素和内容到最后

a.$("#box").append("<span>我是哈哈</span>")

b.var p=document.getElementsByTagName("p")[0];

$("#box").append(p);//哈哈哈这是一个p

2)(字符串/jquery对象).appendTo() 在父元素下添加子元素和内容到最后

$(将字符串转成jquery).appendTo($("#box"));

$("<span>我是第三者</span>").appendTo($("#box"));

3）prepend(字符串/jquery对象/DOM对象) 在父元素下添加子元素和内容到最前面

$("#box").prepend($("span"));

4）(字符串/jquery对象).prependTo() 在父元素下添加子元素和内容到最前面

$("span").prependTo($("#box"));

5）before(字符串/jquery对象/DOM对象)

添加到与box同级的前面

$("#box").before("<span>哈哈</span>");

6）(字符串/jquery对象).insertBefore() 添加到与box同级的前面

($("p")).insertBefore($("#box"));

$("<span>我要飞</span>").insertBefore($("#box"));

7）after(字符串/jquery对象/DOM对象) 添加到与box同级的后面

$("#box").after("<span>我爱的</span>");

8）(字符串/jquery对象).insertAfter() 添加到与box同级的后面

($("p")).insertAfter($("#box"));

9）remove()

($("p")).remove(); //删除p标签

10）empty()

$("#box").empty();//清空id为box元素下的所有标签

11）clone()

$("p").clone().appendTo($("#box"));

拓展：

remove() 与detach区别：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

$("#content").val("jbibwvlbvliwhy");

$("#content").blur(function(){

alert($(this).val());

})

$("#del").click(function(){

input=$("#content").detach();

})//这里用到detach（）方法；失去光标时，会弹出input里面的内容。当删除input，再恢复input时，再失去光标，还是会弹出input里面的内容，而remove不会。（也就是说remove会删除事件）

$("#add").click(function(){

$("body").append(input);

})

</script>

案例：三级联动：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</select>

</select>

</select>

</body>

</html>

var province = ["广西","广东","深圳"];

var city = [["桂林","南宁","柳州"],["东莞","广州","虎门"],["宝安","福田","南山"]];

var village = [[["恭城","平乐","阳朔"],["西乡塘","琅东","朝阳"],["五里卡","L1","L2"]],[["常平","D2","D3"],["G1","G2","G3"],["H1","H2","H3"]],[["后瑞","B2","B3"],["F1","F2","F3"],["西丽","N2","N3"]]];

for(var i=0;i<province.length;i++){

var option=new Option(province[i],i);

$("select[name=province]").append(option);

}

$("select[name=province]").change(function(){

$("select[name=city]")[0].options.length=1;

$("select[name=village]")[0].options.length=1;

console.log($("select[name=city]")[0]);

for(var i=0;i<city.length;i++){

var option=new Option(city[$(this).val()][i],i);

$("select[name=city]").append(option);

}

});

$("select[name=city]").change(function(){

$("select[name=village]")[0].options.length=1;

for(var i=0;i<village.length;i++){

var option=new Option(village[$(":selected").val()][$(this).val()][i],i);

$("select[name=village]").append(option);

}

})

</script>

qq_38068491

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day25css方法 jquery效果样式等操作

一、css方法（）元素.css("样式")//获取样式（可以获取行内设置的样式，也可以获取上style里设置的css样式）元素.css("样式","值")//设置样式二、方法index（）获取当前元素所有序列的下。标注：下标包含同级其它元素。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; ..
复制链接

扫一扫