jQuery入门及bootstarp框架

一、jquery简介

jquery是一个免费的、开源的js库，也是目前使用最广泛的js库

jquery极大的方便完成web前端的相关操作，比如节点操作，元素操作，事件绑定，ajax操作，还可以解决大多数浏览器兼容性的问题

二、jQuery选择器

jquery选择器可以获取html元素

为了学习选择器，先了解一个知识点:jquery通过css方法来修改样式

描述	案例
id选择器	$("#div").css(“background”,“red”);
类选择器	$(".div").css(“background”,“red”);
标签选择器	$(“div”).css(“background”,“red”);
属性选择器	$([name=nice”]").css(“background”,“red”);
后代选择器	$("#div p").css(“background”,“red”);
子选择器	$("#div>p").css(“background”,“red”);
并列选择器	$("#div,.div").css(“background”,“red”);
first last	$(“div:first”).css(“background”,“red”);
eq 通过索引获取元素	$(“div:eq(2)”).css(“background”,“red”);

代码实现：

    <script>
        $(function(){
   
            //id选择器
            $("#div1").css("background","red")
            //class选择器
            $(".div2").css("background","blue")
            //tag标签器
            // $("p").css("fontSize","50px")
            //属性选择器
            // $("[alt]").css("width","200px")
            $("[alt='lian1.png']").css("width","200px")
            //后代选择器
            // $("#div2 span").css("fontSize","50px")
            $("#div2 > span").css("fontSize","50px")
            //first,last,eq索引
            // $("#div3 span:first").css("fontSize","50px")
            // $("#div3 span:last").css("fontSize","50px")
            $("#div3 span:eq(1)").css("fontSize","50px")
        })
    </script>

三、jquery元素操作

通过jquery可以操作控制元素的样式、文本、属性

描述	案例
获取子元素	var childen = $("#div").children();
获取上一个兄弟元素	var prev = $("#div").prev();
获取下一个兄弟元素	var next = $("#div").next();
获取同层除了自己所有元素	var siblings = $("#div").siblings();
获取父元素	var parent = $("#inner").parent();
获取先祖元素	var parents = $("#inner").parents();

代码实现：

    <script>
        $(function(){
   
            $("#myspan").prev().css("fontSize","50px")
            $("#myspan").prev().children().css("fontSize","50px")
            // 注意连写，别找错对象了
            $("#myspan").prev().children("span").css("fontSize","50px")
            $("#myspan").siblings().css("fontSize","50px")
            $("#myspan").siblings("a").css("fontSize","50px")
            console.log($("#myspan").parent())
            $("#myspan").parent().children("p:eq(2)").