博客列表 >2019.5.20作业

2019.5.20作业

关超的博客
关超的博客原创
2019年05月20日 23:08:31632浏览
  1. 参数0520.md文档,将课堂未演示的常用选择器, 自己举例进行联系

//元素element  选择器
$("button").click(function () {

})

//ID选择器
$("#btn").click(function () {

})

//class选择器
$(".test").hide();
//*选择器
$("*").css("color","red");
//层级选择器
$("p.myP,div#myDiv").css("color","red");
//后代选择器, 中间用空格分隔
$("div span").css("color","red");
//子选择器,选择父节点下所有
$("div > span").css("color","red");
//相邻下个兄弟元素
$("div + p").css("color","red");
//获取第一个元素
$("p:first").css("color","red");
//去除所有与给定选择器匹配元素
$("p:not(.del)").css("color","red");
// 内容选择器
$("div:contains('boys')").css("color","red");
// 表单选择器
$(":input").css("color","red");
// 匹配复选框选择器
$(":checkbox").css("color","red");


2. 演示DOM对象与jQuery对象之间的转换方式

<html>
<head>
    <title>jquery演示</title>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
<button type="button" id="btn" name="button">我是一个按钮</button>
<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
</ul>
</body>
<script>
    $(function () {
        //将dom转换为jquery对象
        var $obj = $('#btn');
        console.log($obj instanceof jQuery);

        $('ul li:nth-of-type(3)').css('color', 'red');

        //将jquery转换为dom
        var lis = $('li');
        console.log(lis);

    })

</script>
</html>


上一条:小型计算器示例下一条:520小实验
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议