JQuery基础详解

最新推荐文章于 2023-03-23 09:36:33 发布

吴一尘

最新推荐文章于 2023-03-23 09:36:33 发布

阅读量130

点赞数

分类专栏： WEB前端文章标签： web前端 JQuery

本文链接：https://blog.csdn.net/qq_38238296/article/details/85010153

版权

WEB前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JQuery基础

jQuery是一个js库，免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作DOM常遇到的一些问题，强大的选择器，简化我们的操作

入口函数：$(document).ready(function(){}),和JS中的window.onload事件类似

区别：

window.onload事件只能写一次，绑定多个函数之后，最后一个会覆盖前面所有的事件。
Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。

1.JQuery对象和JS对象

JQuery对象其实就是把DOM对象在重新封装一下，让DOM能使用JQuery方法。简化代码。

DOM对象转换为JQuery对象：$(DOM对象)


        $(document).ready(function () {
           var a=document.getElementById("aa");
    	   //将DOM对象封装成JQuery对象
           var $a=$(a);
           $a.html("你好")
        })

JQuery对象转换为DOM对象

 $(document).ready(function () {
           var $a=$("#aa")
           var a=$a[0];
           a.innerHTML="你好";
        })

//也可以使用$a.get(0)，推荐使用上面的方式。


# 2.JQuery选择器

## ID选择器

	利用DOM元素的id属性值来筛选匹配的元素，并以JQuery包装集的形式返回给对象（也就是说返回的是一个JQuery对象，如果匹配到了很多元素，那么就是一个对象集）

```html
var $a=$("#aa")
<p id="aa">测试</p>

元素选择器

通过元素名称来匹配元素。

var $a=$("p")
<p id="aa">测试</p>

类名选择器

通过类名来匹配元素。

var $a=$(".pp")
<p class="pp">测试</p>

层级选择器(后代)

ancestor descendant (ancestor代表祖先，descendant代表它的所有子孙)

注意有个空格

<script type="text/javascript">
        $(document).ready(function () {
           var $d=$("#box1 p")
            console.log($d);
            //输出有两个p1和p2
        })
    </script>
</head>
<body>
    <div id="box1">
        <p id="p1">测试1</p>
        <div id="box2">
            <p id="p2">测试2</p>
        </div>
    </div>
</body>

parent>child（parent代表父亲child代表直接后代）

<script type="text/javascript">
        $(document).ready(function () {
           var $d=$("#box1>p")
            console.log($d);
            //输出只有一个p1
        })
    </script>
</head>
<body>
    <div id="box1">
        <p id="p1">测试1</p>
        <div id="box2">
            <p id="p2">测试2</p>
        </div>
    </div>
</body>

pre+next：用于匹配紧挨着pre的元素，pre和next是同级的

     $(document).ready(function () {
           var $d=$("#box1+p")
            console.log($d);
			//输出只有一个p1
		/*
		var $d=$("#box1~p")
		输出的就是2个p1和p2
		*/
        })
    </script>
</head>
<body>
    <div id="box1"></div>
    <p id="p1">测试1</p>
    <p id="p2">测试2</p>

pre~siblings：用于匹配pre之后所有的同级元素

属性选择器

通过元素的属性作为过滤条件

[attribute]：匹配给定属性的元素
[attribute=value]：指定属性的值的元素

<script type="text/javascript">
        $(document).ready(function () {
           var $d=$("input[name]")
            console.log($d);
            //输出3个
            /*
            	var $d=$("input[name=in1]")
            	输出一个
            */
        })
    </script>
</head>
<body>
    <input name="in1" type="text">
    <input name="in2" type="text">
    <input name="in3" type="text">

</body>

3.JQuery过滤器：与选择器结合使用

简单过滤器

:first 匹配第一行元素
:last 匹配最后一行元素
:even 匹配偶数行
:odd 匹配奇数行
:eq(index) 匹配指定索引值
:gt(index) 匹配大于指定索引值
lt(index) 匹配小于指定索引
not(selector) 匹配那些没有被选定的元素

  <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("tr:first")
            //匹配的是1111 var $a=$("tr:eq(0)")也是
            //var $a=$("tr:gt(0)")匹配2222和3333            var $a=$("tr:not('#1')") 同样

            //JQuery中addClass方法是通过设置CSS类来修改元素的样式与之相反的是renoveClass 
            $a.addClass("aa")
        })
    </script>
    <style>
        .aa{
            background-color: red;
        }
        .bb{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1px">
        <tr id="1">
            <td>1111</td>
        </tr>
        <tr id="2">
            <td>2222</td>
        </tr>
        <tr id="3">
            <td>3333</td>
        </tr>
    </table>
</body>

内容过滤器

通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选

:contains(text) 匹配包含给定元素的文本
:has(selector) 匹配/含有/选择器所匹配元素/的元素
:parent 匹配含有子元素或者文本的元素

  <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("tr:has('p')")
            //匹配的是2222
            $a.addClass("aa")
        })
    </script>
    <style>
        .aa{
            background-color: red;
        }
        .bb{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table border="1px">
        <tr id="1">
            <td>1111</td>
        </tr>
        <tr id="2">
            <td><p>2222</p></td>
        </tr>
        <tr id="3">
            <td>3333</td>
        </tr>
    </table>
</body>

表单对象属性过滤器

通过表单元素的状态属性（被选中，不可用）匹配元素

:checked 匹配被选中的元素
:enable 可用
:disabled 不可用
:selected 被选中的options元素

 <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("input:checked")
            //匹配到的是篮球
            console.log($a)
        })
    </script>
    <style>
        .aa{
            background-color: red;
        }
        .bb{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="checkbox" checked="checked">篮球
    <input type="checkbox">足球
    <input type="checkbox">羽毛球
    <input type="checkbox">乒乓球
</body>

    <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("select option:checked")
            console.log($a)
            //匹配到的是篮球
        })
    </script>
    <select multiple="multiple">
        <option selected>篮球</option>
        <option>足球</option>
        <option>羽毛球</option>
    </select>

子元素过滤器

:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素

例：$(“ul li:first-child”)：表示无需列表中的第一个列表项

4.节点操作

4.1.创建节点

var $ele =$("<p></p>")创建一个p标签节点

4.2.插入节点

**append(content)**为所匹配的元素

<script type="text/javascript">
        $(document).ready(function () {
            var $a=$("#box1")
            var $p=$("<p>测试</p>")
            $a.append($p)
            //append方法也可以识别html标签，append方法是追加的方式。
            $a.append("<p>test</p>")
           	$a.append("hello")
            $a.append("world")
        })
</script>
</head>
<body>
   <div id="box1">
   </div>
</body>

在元素外添加：

after() 为所匹配的元素节点后面添加
inertAfter() 调用方法的元素添加到方法匹配的元素的后面
before() （前面）同上
inertBefore() …

4.3.删除节点

remove：用于从DOM中删除节点
empty：将元素的内容清空（元素并不会被删除）

4.4.复制节点

clone()

 <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("p")
     //这里还可以这样写$a.bind("click",function(){})
            $a.click(function () {
     //this代表当前的DOM对象需要将其转换为JQuery对象
                $(this).clone().insertAfter($(this))
     //$(this).clone(true).insertAfter($(this))如果是这样的话，clone（）会将当前节点的事件处理程序一并复制，也就是说当我点击P标签的时候，p标签下面会复制出相同的p标签，这个p标签同样具有click事件。
            })
        })
    </script>
</head>
<body>
    <p>这是一个测试</p>
</body>

4.5.遍历节点

each() 对 jQuery 对象进行迭代，为每个匹配元素执行函数。

<script>
        $(document).ready(function () {
            var $a=$("p")
            $a.each(function () {
			//控制台输出当前p标签的文本
                console.log($(this).text())
            })
        })
    </script>
</head>
<body>
    <p>这是第一个测试</p>
    <p>这是第二个测试</p>
    <p>这是第三个测试</p>
    <p>这是第四个测试</p>
</body>

5.JQuery对元素css样式修改

5.1.通过修改CSS类类实现

   <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("p:even")
            $a.addClass("aa")
            var $aa=$("p:odd")
            $aa.addClass("bb");
        })
    </script>
    <style>
        .aa{
            background-color: red;
        }
        .bb{
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div>
        <p>这是第一个测试</p>
        <p>这是第二个测试</p>
        <p>这是第三个测试</p>
        <p>这是第四个测试</p>
    </div>
</body>

5.2.通过修改CSS样式属性实现

通过css方法来实现css(“propertyname”,“value”);

    <script type="text/javascript">
        $(document).ready(function () {
            var $a=$("p:even")
            $a.css("background-color","red")
            var $aa=$("p:odd")
            $aa.css("background-color","yellow")
        })
    </script>
</head>
<body>
    <div>
        <p>这是第一个测试</p>
        <p>这是第二个测试</p>
        <p>这是第三个测试</p>
        <p>这是第四个测试</p>
    </div>
</body>

吴一尘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础详解

JQuery基础jQuery是一个js库，免费开源易用，提供了我们开发中常用到的操作DOM的API，解决了我们使用js操作DOM常遇到的一些问题，强大的选择器，简化我们的操作入口函数：$(document).ready(function(){}),和JS中的window.onload事件类似区别：window.onload事件只能写一次，绑定多个函数之后，最后一个会覆盖前面所有的事件...
复制链接

扫一扫