jQuery简介+引入方式+jQuery选择器+文档操作

最新推荐文章于 2023-12-29 09:33:39 发布

Dc_高

最新推荐文章于 2023-12-29 09:33:39 发布

阅读量174

点赞数

分类专栏： JQuery 文章标签： day06

本文链接：https://blog.csdn.net/baidu_39105268/article/details/80671843

版权

JQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.jQuery是一个JavaScript代码的框架，这个框架本身就是使用JavaScript代码写的

jQuery的优点：

1.1可以简化JavaScript代码

1.2.可以像css一样获取元素

1.3可以在代码中直接修改页面样式(css)

1.4.拥有强大的选择器

1.5.解决浏览器兼容性的问题

2.jQuery的引入方式：

因为jQuery就是JavaScript的代码，所以引入方式和普通JavaScript文件一样

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>

注意：不能再引入的js文件标签内编写js代码！

3.jQuery对象和JavaScript对象的转换

js的对象只能调用js自己的函数，如果js对象的需要调用jQuery中的函数需要把js对象转换成jQuery对象。

<script type="text/javascript">
    //加载完成事件，js原生编写样式
    onload = function(){
 
    }
    //jQuery加载完成事件，复杂版
    $(document).ready(function(){
    
    });
    //jQuery加载完成事件简单版
    $(function(){
        alert("Hello JQ");
        //得到按钮，并绑定事件
        $("#mybtn").click(function(){
            alert("按钮点击了");
            //获取文本框内容
            alert($("#myinp").val());//val=value缩写
            //通过js形式得到js对象
            var myinput = document.getElementById("myinp");
            alert(myinput.value);
            //把js对象转换成jq对象
            var $jq = $(myinput);
            alert($jq.val());
        });
        //绑定点击事件
        $("#jqtojs").click(function(){
            //得到jQuery对象
            var $jq = $("#myinp");
            alert($jq.val());
            //把jQuery对象转换成js对象有两种转换方式，方式一：
            var js1 = $jq[0];//常用
            //方式二
            var js2 = $jq.get(0);
            alert(js1.value+"="+js2.value);
        });
    });
        
</script>
<body>
	<input type="text" id="myinp">
	<input type="button" id="mybtn" value="按钮">
	<input type="button" id="jqtojs" value="jq转js按钮">
</body>

4.jQuery选择器

4.1基本选择器

1.标签名选择器

$("div") 作用：匹配文档中所有的div

2.id选择器

$("#id")

3.类选择器

$(".class")

4.分组选择器

$("div,.class,.#id")

5.所有元素选择器

$("*")

4.2层级选择器

1.“后代选择器”(与JavaScript中选择器基本相同，所以写的名称一样，方便记忆)

$("div span") 匹配div下所以的span元素

2. $("div>span") 匹配div下只是span的子元素

3. $("div+span") 匹配div后面一个的span同级元素(兄弟元素)

4. $("div~span") 匹配div后面所有的span兄弟元素

层级选择器中加上函数的选择器

1.获取元素的所有兄弟元素

$("#two").siblings("div")

2.获取元素的上面元素(获取它的哥哥元素)

$("#two").prev("div")

3..获取元素的所有上面元素(获取它的哥哥们)

$("#two").prevAll("div")

4.获取元素的下面元素(获取它的弟弟)

$("#two").next("div")

5.获取元素的所有下面元素(获取它的弟弟们)

$("#two").nextAll("div")

4.3过滤选择器

1. $("div:first") 匹配所有div中的第一个元素

2. $("div:last") 匹配所有div中的最后一个元素

3. $("div:even") 匹配所有div中偶数div，从0开始

4. $("div:odd") 匹配所有div中奇数div，从0开始

5. $("div:eq(n)") 匹配所有div中下标为n的元素，从0开始

6. $("div:lt(n)") 匹配所有div中下标小于n的元素，从0开始

7. $("div:gt(n)") 匹配所有div中下标大于n的元素，从0开始

8. $("div:not(.one)") 匹配所有div中class不为one的元素

4.4 内容选择器

1. $("div:has(p)") 匹配所有包含p标签的div

2. $("div:empty") 匹配所有空的div

3. $("div:parent") 匹配所有非空的div

4. $("div:contains('id')") 匹配包含id的div

4.5 可见选择器

1. $("div:hidden") 匹配所有隐藏的div元素

2. $("div:visile") 匹配所有可见的div元素

3. $("div").toggle(600); 切换元素的显示状态，600表示切换速度的毫秒数

4. $("div:hidden").show() 让隐藏的元素显示

5. $("div:visible").hide(); 让显示的元素隐藏

4.6 属性选择器

1. $("div[id]") 匹配有id属性的div元素

2. $("div[id='d1']") 匹配id属性等于d1的div

3. $("div[id!='d1']") 匹配id属性不等于d1的div

4.7 子元素选择器

1. $("div:nth-child(n)") 匹配div中第n子元素，n从1开始

2. $("div:first-child") 匹配div中第1个子元素

3. $("div:last-child") 匹配div中最后一个子元素

4.8 表单选择器

1. $(":input") 匹配所有的input中：文本框，密码框，单选，复选框，下拉选，文本域，按钮

2. $(":password") 匹配所有密码框

3. $(":radio") 匹配所有单选

4. $(":checkbox") 匹配所有复选框

5. $(":checked") 匹配所有被选中的单选，复选，下拉选option

6. $("input:checked") 匹配所有被选中的单选和复选，input中没有下拉选的

7. $(":selected") 匹配所有被选中的下拉选option

5.文档操作

1.创建元素

var $d = $("<div>aaa</div>");

2.添加元素

$("#big"),append($d);//添加到同级元素最后面(兄弟元素的最前面)
$("#big").before($d);//添加到同级元素最前面(兄弟元素的最后面)

3.插入元素

$("#big").after($d);//将d标签插入到同级元素id为big的后面(兄弟元素的前面)
$("#big").before($d);//将d插入到同级元素id为bigbig的前面(兄弟元素的后面)

4.删除元素

通过自己删除

$("#id").remove();

先得到所有的同级标签，然后在删除里面#id

$("div").remove("#id");

5.修改样式

$("#id").css("width","40px")//设置宽度
$("#id").css("width")//获取宽度

6.设置属性

$("#id").attr("id","xx");//设置id属性
$("#id").atte("id");//获取id

7.设置文本

$("#id").text("xxx")//设置元素文本
$("#id").text();//获取文本

8.设置html代码

$("#id").html("xxx")//设置元素html代码
$("#id").html()//获取html代码

练习：使用文档操作做一个城市的添加、插入和删除的操作

<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
    function(){//添加操作
        //创建li元素
        var $li = $("<li>深圳</li>");
        //添加到ul中
//      $("ul").append($li);//添加到同级元素的最后面
        $("ul").prepend($li);//添加到同级元素的最前面
    }
    function fn2(){//插入操作
        //创建li元素
        var $li = $("<li>天津</li>")
//      $("#sh").after("$li");//插入到兄弟元素上海的后面
        $("#sh").before("$li");//插入到兄弟元素上海的前面

    }
    function(){//删除操作
//      $("#sh").remove();//删除上海,常用
        $("li").remove("#sh");//先得到所以的li标签，然后在删除里面id为sh的元素
    }
</script>
<body>
    <input    type="button" value="添加" οnclick="fn1()">
    <input    type="button" value="插入" οnclick="fn2()">
    <input    type="button" value="删除" οnclick="fn3()">
    <ul>
	<li>北京</li>
	<li id="sh">上海</li>
	<li>广州</li>
    </ul>
</body>

效果图如下：