一:JQuery下载地址

       jQuery是一个JavaScript脚本库,不需要特别的安装,只需要我们在页面 <head> 标签内中,通过 script 标签引入 jQuery 库即可。

二:JQuery的各个样式

     1. helloword初体验

<html>
<head>
    <title>第一个简单的jQuery程序</title>
    <style type="text/css">
        div {
            padding: 8px 0px;
            font-size: 12px;
            text-align: center;
            border: solid 1px #888;
        }
    </style>

    <!-- 你下载的JQuery地址-->
    <script src="E:\SC_informaion\Jquery\jquery-3.4.1\jquery-3.4.1.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
            $("div").html("你好,欢迎第一次使用JQuery!!");
        });
  </script>

</head>
<body>
    <div>123421</div>
</body>
</html>

其中 $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用。

2.JQuery和DOM对象的区别

普通处理,通过标准JavaScript处理,通过document.getElementById("")方法获取的dom元素就是一个DOM对象,在通过innerHTML与style属性处理文本与颜色。

JQuery处理(var $p=$('')),通过$('')的方法获取一个$p的对象,然后$p是一个类数组对象,这个方法与上面的处理结果是一模一样的。

3.JQuery对象转化成DOM对象

利用数组下标的方式

var $div=$('div') //JQuery对象 

var div=$div[0]//转化为JSON对象

div.style.color="red"; //操作dom对象的属性

通过JQuery自带的get()方法

var $div=$('div')

var div=$div.get(0)

div.style.color='red';

<body>
    <div id="doc1">qwq</div>
    <div id="doc2">ewrw</div>
    <div id="doc3">wew</div>
    <script type="text/javascript">
        var $div = $('div'); //jQuery对象
        var div = $div.get(2);
        div.style.color = 'red'; //操作dom对象的属性
    </script>
</body>

jquery框架模板 jquery 模板_css

 DOM对象转化为JQuery对象

var div=document.getElementsByTagName('div');

var $div=$(div);

var $first=$div.first();      //找到第一个div元素
$first.css('color','red');    //给第一个元素设置颜色

三:JQuery选择器

1. id选择器--    $( "#id" )

注:id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

2. 类选择器--    $(".class")

注: 获取所有class名的dom

3. 元素选择器--  $("element")

注://通过jQuery直接传入标签名p
    //标签是可以多个的,所以得到的同样也是一个合集
    $("div").css("border", "3px solid red");

4. 全选择器--  $("*")

5. 层级选择器

    $("parent>child")   子选择器,选择parent下的直接child子元素

    $("ancestor descendant")  后代选择器,选择ancestor里面的所有后代

    $("prev +next")  相邻兄弟选择器,选择紧跟在prev后面的元素

    $("prev ~sibling")  一般兄弟选择器,匹配prev之后的所有sibling元素并且属于同一个父亲

6. 基本筛选选择器

    $(':first')  --  匹配第一个元素

    $(':last')  --  匹配最后一个元素

    $(':not(selector)')  --  一个 用来过滤的选择器,选择所有元素取出不匹配给定的选择器元素

    $(':eq(index)')  --  在匹配集中选择索引值为index的元素

jquery框架模板 jquery 模板_css_02

7.内容文本选择器

jquery框架模板 jquery 模板_css_03

8. 可见性选择筛选器

jquery框架模板 jquery 模板_选择器_04