JQuery入门_语法、函数、对象、DOM、事件

最新推荐文章于 2022-09-02 21:37:49 发布

JunSIr_#

最新推荐文章于 2022-09-02 21:37:49 发布

阅读量808

点赞数

分类专栏：前端文章标签： jquery java js javascript dom

本文链接：https://blog.csdn.net/JunSIrhl/article/details/104012550

版权

JQuery入门_语法、函数、对象、DOM、事件

文章目录

JQuery入门_语法、函数、对象、DOM、事件
- 概述
- JQuery使用
- JQuery_DOM
- JQuery选择器
- DOM处理
- 事件
- AJax

概述

jQuery（J查找）由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team。

其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。

它是轻量级的js库(压缩后只有21k) ，还兼容各种浏览器

jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。

jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择

JQuery使用

在web工程中导入

下载地址

在html文件或js文件中引用

<script src="WEB-INF/lib/jquery-1.8.3.js" ></script>

ALT+左键点击能进入代表引用成功

主函数

加载jquery的主函数：jQuery的主函数的作用在于把整个HTML文档加载完毕后再去执行主函数，方便处理来自客户端的值

<script>
    $(function(){
    
        alert("hello JQuery")
    })
</script>

JQuery_DOM

在 HTML DOM (Document Object Model) 中, 每DOM都是节点 :

文档本身就是一个文档对象
所有 HTML 元素都是元素节点
所有 HTML 属性都是属性节点
插入到 HTML 元素文本是文本节点
注释是注释节点

Jquery对原生JS的DOM做了封装，使我们可以更方便的操控DOM

JS_DOM转jQuery_DOM

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

注意：在jQuery中，获取值为.val()，在原生JS中，获取值为.value

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
    <script>
        $(function myclick(){
    
            //获取值
            var val = document.getElementById("myclick");
            //把dom转换成jQuery对象
            var jval = $(val);
            //在jQuery中，获取值为.val()，在原生JS中，获取值为.value
            alert(jval.val());})
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="myclick" type="text"  value="悟空" >
</body>
</html>

JQuery_DOM转JS_DOM

        $(function myclick(){
   
            //获取值
            var val = document.getElementById("myclick");
            //把dom转换成jQuery对象
            var jval = $(val);
            alert(jval.val());
            //JQuery对象转换成DOM对象
            var Dval = jval[0]
            alert(Dval.value)
        })

JQuery选择器

基本选择器:

#id ：id选择器用法: $("#myDiv")：根据给定的ID匹配元素的值
Element（元素选择器）用法: $("div") 返回值 集合元素

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
    <script>
        $(function fun(){
    
            //根据id选择器获得HTML元素
            var jinput = $("#myinput");
            alert(jinput.val()); 
            
            //根据元素选择器获得所有页面上input的HTML元素
            var inputs = $("input");
            
            //原生JS的遍历
            for(var i = 0; i < inputs.length; i++){
    
                alert(inputs[i].value)
            } 
            //需要使用jQuery提供的遍历方式：
            inputs.each(function(){
    
                //获得每一个jQuery对象
                var obj = $(this);
                alert(obj.val());
            })
        })
    </script>
    <meta charset="UTF-8">
    <title>Title</title>
</head>


<body>
    <input id="myclick" type="text"  value="悟空" >
    <input id="myclick1" type="text"  value="悟空1" >
    <input id="myclick2" type="text"  value="悟空2" >
</body>
</html>

class类选择器用法: $(".myClass") 返回值集合元素

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="WEB-INF/lib/jquery-1.8.3.js" ></script>
    <script>
        $(function fun(){
    
            var divs = $(".divcss");
            divs.each(function(){
    
                var divObj = $(this);
                alert(divObj.html

最低0.47元/天解锁文章

JunSIr_#

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery入门_语法、函数、对象、DOM、事件

JavaEE-JS的优美封装-JQuery详细学习笔记文章目录JavaEE-JS的优美封装-JQuery详细学习笔记概述JQuery使用导包引用主函数Jquery对象DOM转jQueryJQuery转DOMJQuery选择器基本选择器层次选择器过滤选择器全代码示例属性过滤选择器子元素过滤选择器DOM处理Append外部插入结点创建结点删除结点clone属性操作HTML，文本和值结点遍历事件AJa...
复制链接

扫一扫