JQuery

最新推荐文章于 2024-08-12 09:24:46 发布

林木木木木木木

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量106

点赞数 1

文章标签： jquery javascript js

本文链接：https://blog.csdn.net/qq_42142597/article/details/109641627

版权

语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）“查询"和"查找” HTML 元素
jQuery 的 action() 执行对元素的操作
实例:
$(this).hide() - 隐藏当前元素
$(“p”).hide() - 隐藏所有
元素
$(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
$("#test").hide() - 隐藏 id=“test” 的元素
jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合

文档就绪事件

$(document).ready(function){
// 你的代码
}
## 或者
$(function(){
// 你的代码
})

## 写成javasrcipt格式
window.onload = function () {
    // 执行代码
}

选择器

jQuery 中所有选择器都以美元符号开头：$()，允许您对 HTML 元素组或单个元素进行操作。

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：

$("#test")
## 实例
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

$(".test")

其他查找方式

$("*")  # 选取所有元素
$(this) # 选取当前 HTML 元素，也就是谁在用这个函数
$(p.intro) #选取 class 为 intro 的 <p> 元素
$(p:first) # 选取第一个 <p> 元素
$(ul li:first) # 	选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child")	#选取每个 <ul> 元素的第一个 <li> 元素
$("[href]")	选取带有 href 属性的元素
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

独立文件中使用 jQuery 函数

为了日常的jQuery函数易于维护，通常是将 jQuery 函数放到独立的 .js 文件中。
例如

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

事件

页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
例如：

在元素上移动鼠标。
选取单选按钮
点击元素

常见事件方法

具体可以看code

click() 
dblclick()
mouseenter()
mouseleave()
mousedown()
mouseup()
hover()  ## 模拟光标悬停事件。会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)
focus()
blur()

效果

隐藏

hide()
show()

常规操作

捕获

获得内容 - text()、html() 以及 val()
获取属性 - attr()

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
$("button").click(function(){
  alert($("#runoob").attr("href"));
});
$("#btn1").click(function(){
  alert("值为: " + $("#test").val());
});

设置

方法和获取中一致

$("#btn1").click(function(){
    $("#test1").text("Hello world!");  #　替换
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");   ## 注意这里是插入，不是替换
});
$("#btn3").click(function(){
    $("#test3").val("RUNOOB");
});

$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});   # 设置属性

text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

添加元素

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

三种创建标签的方式

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

删除

remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

获取并设置CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作，有该css则删除，没有则添加
css() - 设置或返回样式属性

尺寸

ajax请求

//完整实例如：（表单html结构不在写）
    $("form").on("submit",function(){
        var url = this.action;   //可以直接取到表单的action
        var formData = $(this).serialize();
        $.post(url,formData,
            function(data){
                //返回成功，可以做一个其他事情
                console.log(data);
            },'json');

        //阻止表单默认提交行为
        return false
    })

JS中切片,JSON

code
code
JOSN
JSON解析

$.ajax 参数详解

code
code

林木木木木木木

关注

1
点赞
踩
0

收藏

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

jquery笔记语法文档就绪事件选择器id 选择器.class 选择器其他查找方式独立文件中使用 jQuery 函数事件常见事件方法效果隐藏常规操作捕获设置添加元素删除获取并设置CSS尺寸ajax请求JS中切片,JSON$.ajax 参数详解语法jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。基础语法： $(selector).action()美元符号定义 jQuery选择符（selector）“查询"和"查找” HTML 元素jQuery 的 action() 执行
复制链接

扫一扫