jQuery

最新推荐文章于 2023-07-19 11:23:10 发布

花呗逾期

最新推荐文章于 2023-07-19 11:23:10 发布

阅读量60

点赞数

文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_38952397/article/details/117333910

版权

jQuery

- 使用jQuery需要先导入jQuery类库

使用jQuery需要先导入jQuery类库

jQuery的核心函数

$符是 j Q u e r y 中的核心函数能完成 j Q u e r y 的很多功能，$ ()就是调用这个函数

当传入参数为[函数]时，表示页面加载完成之后，相当于window.onload = function(){}
```
$(function () {
    alert("页面加载完成后调用")
});
```

传入参数为[HTML字符串]时，会为我们创建这个HTML标签对象

$("<div>" +
"<span>1</span>"+
"<span>2</span>"+
"</div>").appendTo("body");

如果传入参数为[选择器字符串]时

$("#id属性值"); id选择器，根据id查询标签对象

$(“标签名”); 标签名选择器，根据指定标签名查询标签对象

$(".class属性值"); 类型选择器，可以根据class名查询标签对象

$(“selector1.selector2”) 组合选择器，合并选择器1和2的结果并返回
传入参数为[DOM]对象时，会把这个dom对象转换为jQuery对象
```
var obj = document.getElementById("btn");
alert($(obj));
```

JQuery对象和DOM对象区分

什么是jQuery对象，什么是dom对象

dom对象
1. 通过getElementById()查询出来的标签对象是DOM对象
2. 通过getElementByName()查询出来的标签对象是DOM对象
3. 通过getElementByTagName()查询出来的标签对象是DOM对象
4. 通过createElement()方法创建的对象，是DOM对象
  
  DOM对象alert出来的效果是: [object HTML 标签名 Element]
jQuery对象
1. 通过jQuery通过的API创建的对象，是jQuery对象
2. 通过jQuery包装的DOM对象，也是jQuery对象
3. 通过jQuery通过的API查询到的对象，是jQuery对象
  
  jQuery对象alert出来的效果是: [object Object]
jQuery对象的本质

jQuery对象是 dom对象的数组+jQuery提供的一系列功能函数
jQuery对象与DOM对象的区

jQuery对象不能使用时DOM对象的属性和方法，反之同样
DOM对象和jQuery对象互转
1. dom对象转化为jQuery对象
  
  先有DOM对象，$(DOM对象) 就可以转换成为jQuery对象
2. jQuery对象转为DOM对象
  
  先有jQuery对象，jQuery对象[下标]取出相应的DOM对象
jQuery选择器
1. 层级选择器
  
  ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
  
  parent>child 子元素选择器：给定的父元素下匹配所有的子元素
  
  prev + next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
  
  prev~sibings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素
2. 过滤选择器
  
  :first 获取第一个元素
  
  :last 获取最后一个元素
  
  :not(selector) 去除所有与给定选择器匹配的元素
  
  :even 匹配所有索引值为偶数的元素，从0开始计数
  
  :odd 匹配所有索引值为奇数的元素，从0开始计数
  
  :eq(Index) 匹配一个给定索引值的元素
  
  :gt(Index) 匹配所有大于给定索引值的元素
  
  :It(Index) 匹配所有小于给定索引值的元素
  
  :header 匹配如h1,h2,h3之类的标题元素
  
  :animated 匹配所有正在执行动画效果的元素
3. 内容过滤
  
  :contains(text) 匹配包含给定文本的二元素
  
  :empty 匹配所有不包含子元素或者文本的空元素
  
  :parent 匹配含有子元素或者文本的元素
  
  :has(selector) 匹配含有选择器所匹配的元素的元素
4. 属性过滤
  
  [attribute] 匹配包含给定属性的元素
  
  [attribute=value] 匹配给定的属性是某个特定值的元素
  
  [attribute!=value] 匹配所有不含指定的属性，或者属性不等于特定值的元素
  
  [attribute^=value] 匹配给定的属性是以某些值开始的元素
  
  [attribute$=value] 匹配给定的属性是以某些值结尾的元素
  
  [attribute*=value] 匹配给定的属性是以包含某些值的元素
  
  [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用
5. 表单过滤器
  
  :input 匹配所有input，textarea，select和button元素
  
  :text 匹配所有的单行文本框
  
  :password 匹配所有的密码框
  
  :radio 匹配所有单选按钮
  
  :checkbox 匹配所有的复选按钮
  
  :submit 匹配所有提交按钮
  
  :image
  
  :reset 匹配所有重置按钮
  
  :button 匹配所有按钮
  
  :file 匹配所有文件域
  
  :hidden 匹配所有不可见的元素，或者type为hidden的元素
6. 元素过滤器
  
  :eq(index) 获取给定索引的元素
  
  :gt(index) 选择器选取 index 值高于指定数的元素。
  
  :first() 获取第一个元素
  
  :last() 获取最后一个元素
  
  :is() 判断是否匹配给定的选择器，只要有一个匹配就返回，true
  
  :has(exp) 返回包含匹配选择器的元素的元素
  
  :not(exp) 删除匹配选择器的元素
  
  :children(exp) 返回匹配给定选择器的子元素
  
  :find(exp) 返回匹配给定选择器的后代元素
  
  :next() 返回当前元素的下一个兄弟元素
  
  :nextAll() 返回当前元素后面所有的兄弟元素
  
  :nextUntill() 返回当前元素到指定匹配的元素为止的后面元素
  
  :parent() 返回父元素
  
  :prev(ALL) 返回当前元素前面所有的兄弟元素
  
  :prevUnit(exp) 返回当前元素到指定匹配的元素为止的前面元素
  
  :sibilings(exp) 返回所有兄弟元素

jQuery属性操作

html() 该方法可以设置和获取起始标签和结束标签中的内容，跟dom属性InnerHTML一样
text(）该方法可以设置和获取起始标签和结束标签中的文本，跟dom属性innerText一样
val() 该方法可以设置和获取表单项的value属性值，跟dom属性value一样
attr() 可以设置和获取属性值，不推荐操作，checked，readOnly，selected，disabled等等
prop() 可以设置和获取属性值，只推荐操作，checked，readOnly，selected，disabled等等

DOM增删改

内部插入

appendTo a.appendTo(b) 把a插入到b子元素末尾，成为最后一个子元素

prependTo a.prependTo(b) 把a插到b所有子元素的前面，成为第一个子元素
外部插入

insertAfter() a.insertAfter(b) 得到ba

insertBefore() a.inserBefore(b) 得到ab
替换

replaceWith() a.replaceWith(b) 用b替换掉a

replaceAll() a.replaAll(b) 用a替换掉所有b

删除

remove() a.remove() 删除a标签

empty() a.empty() 清空a标签里的内容

//练习1
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #employeeTable{
            border-collapse: collapse;
            margin: auto;
        }
        .box{
            border: 1px solid black;
            width: 250px;
            margin: auto;
            margin-top: 50px;
        }
        .box table{
            margin: auto;
        }
        .box h4{
            margin-left: 15px;
        }
    </style>

    <script src="JQuery/jquery-3.5.1.js"></script>
    <script>
        var Fun=function (){
            var  $trObj = $(this).parent().parent();
            if (confirm("确认要删除吗？")){
                $trObj.remove();
            }
			
            //return false可以取消标签默认操作
            return false;
        }
        $(function (){
            $("#addEmpButton").click(function (){
                var name = $("input[name=empName]").val()
                var email = $("input[name=email]").val()
                var salary = $("input[name=salary]").val()

                var $trObj=$("<tr>\n" +
                    "            <td>"+name+"</td>\n" +
                    "            <td>"+email+"</td>\n" +
                    "            <td>"+salary+"</td>\n" +
                    "            <td><a href=\"deleteEmp?id=001\">Delete</a></td>\n" +
                    "        </tr>")
                $trObj.appendTo($("#employeeTable"));

                $trObj.find("a").click(Fun)
            });

            $("a").click(Fun)
        })
    </script>
</head>
<body>
    <table id="employeeTable" border=1>
        <tr>
            <th>Name</th>
            <th>Email</th> 
            <th>Salary</th>
            <th></th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@bob.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>

    </table>
    <div class="box">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

//练习2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        select{
            width: 100px;
            height: 140px;
        }

        div{
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script src="JQuery/jquery-3.5.1.js"></script>
    <script >
        $(function (){
            $("button:eq(0)").click(function (){
                $("select:eq(0) option:selected").appendTo("#right")
            });

            $("button:eq(1)").click(function (){
                $("select:eq(0) option").appendTo("#right")
            })

            $("button:eq(2)").click(function (){
                $("select:eq(1) option:selected").appendTo("#left")
            });

            $("button:eq(3)").click(function (){
                $("select:eq(1) option").appendTo("#left")
            })
        })
    </script>
</head>
<body>
<div>
<select multiple="multiple" id="left">
    <option value="opt01">选项1</option>
    <option value="opt02">选项2</option>
    <option value="opt03">选项3</option>
    <option value="opt04">选项4</option>
    <option value="opt05">选项5</option>
    <option value="opt06">选项6</option>
    <option value="opt07">选项7</option>
    <option value="opt08">选项8</option>
    <option value="opt09">选项9</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div>
<select multiple="multiple" id="right">

</select>
<button>选中删除到右边</button>
<button>全部删除到右边</button>
</div>
</body>
</html>

Css样式操作

addClass 向被选的元素添加一个或多个属性，添加多个时用空格隔开
removeClass 从被选元素杀出一个或多个属性，什么都不写，就是全部删掉
toggleClass 对被选元素进行添加/删除属性的切换操作，没有就添加，有就删除
offset 返回第一个匹配元素相对于文档的位置，可以传入top和left，之后会按照该坐标移动
```
var test = $("div:first");
test.offset({
    top:100,
    left:50
})
```

jQuery动画

基本动画

show() 将隐藏的元素显示

hide() 将可见的元素隐藏

toggle() 可见的就隐藏，隐藏的就显示

以上方法都可以传参：
1. 第一个参数是动画执行的时长，以毫秒为单位
2. 第二个参数是动画的回调函数[动画完成后自动调用的函数]
淡入淡出动画

fadeln() 淡入(慢慢可见)

fadeOut() 淡出(慢慢消失)

fadeTo() 在指定时长内慢慢将透明度修改到指定的值

fadeToggle() 切换消失/可见

传参与基本动画一致

jQuery事件操作

js原生与jQuery，两者页面加载完成后执行的区别

它们触发的顺序，jQuery页面加载完成之后先执行，原生js的页面加载完成之后后执行

原因是jQuery的页面加载完成，是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行

而原生js的页面加载完成，除了要等浏览器解析完标签创建好dom对象，还要等标签显示时需要的内容加载完成

它们执行的次数，原生js的页面加载完成之后，只会执行最后一次的赋值函数，jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行
jQuery中的事件处理方法

click() 绑定单击事件，以及触发单击事件，传入函数是绑定事件，不传是触发事件

mouseover() 鼠标移入事件

mouseout() 鼠标移出事件

bind() 可以给元素一次性绑定一个或多个事件

one() 使用上跟bind一样，但是每个绑定的事件只会触发一次

unbind() 用法和bind相反，取消绑定事件，没有参数，就会将事件全部删除

live() 也是用来绑定事件，可以用来绑定选择器匹配的所有元素事件，哪怕这个元素是后面动态创建出来的也有效

事件的冒泡

什么是事件的冒泡？

事件的冒泡是指，父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也会被传递到父元素的事件里响应

那么如何阻止事件冒泡呢

在事件函数体内，return false 可以阻止事件的冒泡传递

事件对象

实践对象，是封装有触发的事件信息的一个JavaScript对象

我们重点关心的是怎么拿到这个JavaScript的事件对象，以及使用

如何获取JavaScript事件对象呢

在给元素绑定事件时，在事件的function(event)参数列表中添加一个参数，这个参数名，习惯取名为event

这个event就是JavaScript传递参数事件处理函数的事件对象

原生js获取事件对象

window.onload = function(){
    document.getElementById("areaDiv").onclick = function(event){
        console.log(event)
    }
}

jQuery获取事件对象

$(function(){
	$("#areaDiv").click(funciton(event){
		console.log(event)
	})
})

是哦用bind同时对多个事件绑定同一个函数怎么获取当前操作的事件

$(function(){
	$("#areaDiv").bind("mouseover mouseout"), function(event){
    	if(event.type == "mouseover"){
            console.log("鼠标移入");
        }else if(event.type == "mouseout"){
            console.log("鼠标移出");
        }
	})
})

花呗逾期

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

jQuery使用jQuery需要先导入jQuery类库jQuery的核心函数JQuery对象和DOM对象区分jQuery属性操作DOM增删改Css样式操作jQuery动画jQuery事件操作事件的冒泡事件对象使用jQuery需要先导入jQuery类库jQuery的核心函数符是jQuery中的核心函数能完成jQuery的很多功能，符是jQuery中的核心函数能完成jQuery的很多功能，符是jQuery中的核心函数能完成jQuery的很多功能，()就是调用这个函数当传入参数为[函数]时，表示页面加
复制链接

扫一扫