JQuery学习笔记

YiHong_Li

于 2018-10-21 11:51:38 发布

阅读量152

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/yihong_li/article/details/83240242

版权

学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

jQuery语法

$(this).hide() // 隐藏当前元素

$("p").hide() // 隐藏所有<p>元素

$("p.test").hide() // 隐藏所有class="test"的<p>元素

$("#test").hide() //隐藏所有id="test"的元素

JQuery选择器

$("*") //选取所有元素

$("this") //选取当前HTML元素

$("p.into") //选取class为into的<p>元素

$("p:first") //选取第一个<p>元素

$("ul li:first") //选取第一<ul>元素的第一个<p>元素

$("ul li:first-child") //选取每个<ul>元素的第一个<p>元素

$("a[target='_blank']") 选取所有target属性等于"_blank"的<a>元素

$("[href]") //选取带有href属性的元素

$(":button") //选取所有type="button"的<input>元素和<button>元素

JQuery事件

鼠标事件

$("p").click(function(){
    console.log("鼠标点击<p>元素后执行代码")
})

$("p").dblclick(function(){
    console.log("鼠标双击<p>元素后执行代码")
})

$("p").mouseenter(function(){
    console.log("当鼠标穿过<p>元素时，会发生mouseenter事件")
})

$("p").mouseleave(function(){
    console.log("当鼠标离开<p>元素时，会发生mouseenter事件")
})

键盘事件

keypress() //键被按下执行代码

keydown() //键按下的过程

keyup() //键被松开

hover() //鼠标经过事件，触发了mouseenter和mouseleave事件

$("p").hover(function(){
    $("p").css("background-color","yellow"); //mouseenter事件 },
    function(){ $("p").css("background-color","pink"); //mouseleave事件
});

表单事件

submit()事件

用法1：

$("#register").click(function(){
    $("form").submit() //提交表单的数据
})

<form action="">
    First name:
    <input type="text" name="FirstName" value="Mickey"><br>
    Last name: 
    <input type="text" name="LastName" value="Mouse"><br>
    <input id="register" type="button" name="LastName" value="Mouse"><br>
</form>

用法2：

$("form").submit(function(){
    alert("数据已提交")
})

<form action="">
    First name:
    <input type="text" name="FirstName" value="Mickey"><br>
    Lastname: 
    <input type="text" name="LastName" value="Mouse"><br>
    <input id="register" type="submit" name="LastName" value="Mouse"><br>
</form>

change()事件

$('#username').change(function) {
    console.log("当用户名改变时，打印此内容")
}

JQuery效果

hide() //隐藏

show() //显示

toggle() //显示/隐藏

JQuery HTML

捕获

text() //返回所选元素的文本内容

text("设置文本内容") //设置所选元素的文本内容

html() //设置或返回所选元素的内容（包括 HTML 标记）

val() //设置或返回表单字段的值

attr("属性名") //方法用于获取属性值

attr("属性名", "新属性值") //方法用于设置属性值

删除元素

remove() //删除被选元素（及其子元素）

empty() //从被选元素中删除子元素

添加元素

append() //在被选元素的结尾插入内容

prepend() // 在被选元素的开头插入内容

after() //在被选元素之后插入内容

before() //在被选元素之前插入内容

CSS类

addClass("类名1", "类名2") //向被选元素添加一个或多个类

removeClass("类名1", "类名2") //从被选元素删除一个或多个类

toggleClass("类名1", "类名2") // 对被选元素进行添加/删除类的切换操作

css() //设置或返回样式属性

设置单个样式属性的实例：

$("p").css("background-color","yellow");

设置多个样式属性的实例：

$("p").css({"background-color":"yellow","font-size":"200%"});

遍历—祖先

parent() //返回被选元素的直接父元素，该方法只会向上一级进行遍历

parents() //返回被选元素的所有祖先元素，一直向上直到<html>, 可以使用参数进行过滤

$(document).ready(function(){
    $("span").parents("ul");
    console.log("返回所有<span>元素的所有祖先，并且它是<ul>元素");
});

遍历—后代

children() //方法返回被选元素的所有直接子元素

$("div").children("p.1"); //返回类名为"1"的所有<p>元素，且它是<div>的直接子元素

find() // 方法返回被选元素的后代元素，一路向下直到最后一个后代

$("div").find("span"); //返回<div>后代的所有<span>元素

$("div").find("*"); //返回<div>的所有后代

遍历—同胞

siblings() // 方法返回被选元素的所有同胞元素

$("h2").siblings("p"); //返回<h2>的同胞元素的所有<p>元素

next() //方法返回被选元素的下一个同胞元素。

prev() //方法返回被选元素的上一个同胞元素。

遍历—过滤

first() //方法返回被选元素的首个元素。

last() //方法返回被选元素的最后一个元素。

filter() //方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

$("p").filter(".url"); //返回带有类名 "url" 的所有 <p> 元素

not() //方法与 filter() 相反。

JQuery AJAX

GET - 从指定的资源请求数据

$.get(URL, {name:'muzili'},function(data))

URL:请求的地址

{name:'muzili'}：需要请求的内容（可选的）

function(data)：参数请求成功后所执行的函数，data：请求返回的数据

POST - 向指定的资源提交要处理的数据

$.post(URL, {name:'muzili'},function(data))

URL:请求的地址

{name:'muzili'}：需要请求的内容（可选的）

function(data)：参数请求成功后所执行的函数，data：请求返回的数据

YiHong_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery学习笔记

jQuery语法$(this).hide() // 隐藏当前元素$("p").hide() // 隐藏所有&lt;p&gt;元素$("p.test").hide() // 隐藏所有class="test"的&lt;p&gt;元素$("#test").hide() //隐藏所有id="test"的元素JQuery选择器$("*") //
复制链接

扫一扫