美文网首页
jQuery选择器笔记

jQuery选择器笔记

作者: 五更月下琉璃 | 来源:发表于2019-01-08 11:58 被阅读0次

和css的class选择器、id选择器一样对HTML 的元素组或单个元素进行操作。

实例:

$(document).ready(function(){

$(''button").click(function(){

$("p").hide();

});

});

意思是点击这个按钮后所有的<p>会被隐藏


#id选择器,id是唯一的,需要选取唯一的元素的时候通过#id选择器来选取

$(document).ready(function(){

$(''button").click(function(){

$("#test").hide();

});

});

点击后id="test"的元素会被隐藏。


.class选择器:通过指定的class查找元素

$(".test")这是语法。

实例

$(document).ready(function(){

$(''button").click(function(){

$(" .test").hide();

});

});

点击之后所有class="test"的元素被隐藏。


常用的选取:

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

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

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

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

$(div p span)    //层级选择器,div下的p元素中的span元素

$(div>p)    //父子选择器,div下的所有p元素

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

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

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

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

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


为了方便维护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>

相关文章

  • jQuery学习笔记-1

    阅读锋利的jQuery,做下笔记。第二章 jQuery选择器 1. jQuery选择器优势 简洁的写法 支持CSS...

  • jquery选择器书目录

    jquery选择器-基本选择器 jquery选择器-层级选择器 jquery选择器-基本过滤选择器 jquery选...

  • JQUERY一

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器 jQuery 事件 jQuery...

  • jQuser有选择器

    jQuery基本选择器 jQuery过滤选择器 jQuery层级选择器 jQuery筛选选择器(方法)

  • 选择器

    jQuery 元素选择器 jQuery 属性选择器 jQuery CSS 选择器

  • jQuery 基础

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery

    jQuery jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样...

  • jQuery选择器

    一、jQuery常用选择器 二、jQuery选择器优势 三、jQuery常用基本选择器 四、jQuery常用层次选...

  • JQuery基础知识

    jQuery操作DOM jQuery的选择器 基本选择器 层级选择器 过滤选择器 jQuery操作样式 css操作...

  • jQuery相关知识

    1、什么是jQuery选择器? jQuery选择器

网友评论

      本文标题:jQuery选择器笔记

      本文链接:https://www.haomeiwen.com/subject/jmdvrqtx.html