javascript基础与Jquery(选择器)2019年10月25日

2019年10月27日 22:48:15阅读数：640博客 / 渊的博客 / JQuery

1、子元素选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="main">
    <div class="header">
        <div class="nav">
            <a href="">首页</a>
            <a href="">视频教程</a>
        </div>
    </div>
    <div class="imgs">
        <img src="" alt="" />
    </div>
</div>
</body>
</html>
<script>
//1、子元素
 var res=$('.main>div');
 console.log('一共有'+res.length+'个元素');
 $.each(res,function(i,v){
    console.log(v);
 });
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

子元素.png


2、相邻选择器


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
 <label>Name:</label>
  <input name="name" /><p></p>
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
  <input name="naw" />
</body>
</html>
<script>
 var res=$('label+input');
  console.log('一共有'+res.length+'个元素');
 $.each(res,function(i,v) {
     console.log(v);
 })
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

相邻选择器.png


3、索引元素选择器


获取第一个元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

 <div class="article_list">
    <p>文章列表1</p>
    <p>文章列表2</p>
    <p>文章列表3</p>
    <p>文章列表4</p>
</div>
</body>
</html>
<script>
$('.article_list p:first').css('color','red');
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图


first.png


匹配一个给定索引值的元素


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

 <div class="article_list">
    <p>文章列表1</p>
    <p>文章列表2</p>
    <p>文章列表3</p>
    <p>文章列表4</p>
</div>
</body>
</html>
<script>
$('.article_list p:eq(1)').css('color','red');
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图


eq.png

匹配所有大于给定索引值的元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

 <div class="article_list">
    <p>文章列表1</p>
    <p>文章列表2</p>
    <p>文章列表3</p>
    <p>文章列表4</p>
</div>
</body>
</html>
<script>
$('.article_list p:gt(1)').css('color','red');
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图


gt.png


匹配所有小于给定索引值的元素


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

 <div class="article_list">
    <p>文章列表1</p>
    <p>文章列表2</p>
    <p>文章列表3</p>
    <p>文章列表4</p>
</div>
</body>
</html>
<script>
$('.article_list p:lt(3)').css('color','red');
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图


lt.png


获取最后个元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Jquery选择器</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

 <div class="article_list">
    <p>文章列表1</p>
    <p>文章列表2</p>
    <p>文章列表3</p>
    <p>文章列表4</p>
</div>
</body>
</html>
<script>
$('.article_list p:last').css('color','red');
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

last.png

4、setInterval移动

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<style>
    .myclass{width:100px;height: 100px;background: red;}
    .red-rect{width:100px;height: 100px;background: red;}
</style>
<body>
<div class="myclass"></div>
<p>
</p>
    <div class="red-rect">aaa</div>
    <button onclick="move()">动起来</button>
    <input type="hidden" name="" id="article_id" class="sdf" value="" />
</body>
</html>
<script>
function move(){
    var left=1;
    var timer=setInterval(function(){
        $('.red-rect').css('margin-left',left);
        left++;
        console.log(left);
        if(left>200){
            clearInterval(timer);
        }
    });
 }
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

setinterval.png


5、匹配所有不可见元素，或者type为hidden的元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<style>
    .myclass{width:100px;height: 100px;background: red;}
    .red-rect{width:100px;height: 100px;background: red;}
</style>
<body>

<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>
</body>
</html>
<script>

var res=$("tr:hidden");
$.each(res,function(i, v) {
    console.log(v);
});
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

hidden.png

6、匹配可见元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div>hello</div>
<label for="">用户名：</label><input type="text" />
<table>

  <tr style="display:none"><td>Value 1</td></tr>

  <tr><td>Value 2</td></tr>

</table>
</body>
</html>
<script>
var res=$("div:visible");
$.each(res,function(i, v) {
    console.log(v);
});

</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

visible.png

7、匹配包含给定属性的元素

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>属性</title>
     <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div flag="aaa">aaa</div>
<div flag="ccc">ccc</div>
<span class="layui-icon-face-smile"></span>
</body>
</html>
<script>
console.log($('div[flag]').text());//含有flag属性的DIV
console.log($('div[flag="ccc"]').text());//含有flag="ccc"属性的DIV
console.log($('div[flag!="ccc"]').text());//含有flag不等于"ccc"属性的DIV
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

指定属性.png

8、开头、结尾以及包含指定属性值

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>属性</title>
     <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>
<input name="newsletter" /><br>
<input name="milkman" /><br>
<input name="newsboy" /><br>
</body>
</html>
<script>
console.log('-----以属性某个字符开头的------');
var res=$("input[name^='news']");
$.each(res,function(i, v) {
    console.log(v);
});
console.log('-----以属性某个字符结尾------');
var rea=$('input[name$="n"]');
$.each(rea,function(i, v) {
    console.log(v);
});

console.log('-----包含指定属性值------');
var rec=$('input[name*="w"]');
$.each(rec,function(i, v) {
    console.log(v);
});
$('input[name$="n"]').animate({'margin-left':'+=100px'},1000);
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

开头结尾.png

9、属性选择器

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>属性</title>
     <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
</head>
<body>

<form action="">
    <input type="checkbox" disabled="disabled" /><br>
    <input type="file" disabled="disabled" /><br>
    <input type="hidden" disabled="disabled" /><br>
    <input type="image" /><br>
    <input type="password" /><br>
    <input type="radio" checked="checked" /><br>
    <input type="submit" /><br>
    <input type="text" disabled="disabled" /><br>
</form>
<textarea name="" id="" cols="30" rows="10"></textarea><br>
<button>Button</button><br>
<div name="edit" contenteditable="true" style="width: 200px;height: 100px;border:1px solide #cdcdcd;">
<img src="http://www.bao.com/mi/static/img/footlogo.png" alt=""  style="width:50px;" />
</div>
<select name="" id="">
    <option value="province" name="province">上海</option>
    <option value="">安微</option>
    <option value="" name="">重庆</option>
</select>
</body>
</html>
<script>
console.log('----所有input元素----');
var res=$(':input');
$.each(res,function(i, v) {
    console.log(v);
});

console.log('----所有div[name="edit"]元素----');
var rea=$('div[name="edit"]');
$.each(rea,function(i, v) {
    console.log(v);
});

console.log('----所有input:enabled元素----');
var reb=$('input:enabled');
$.each(reb,function(i, v) {
    console.log(v);
});

console.log('----所有input:disabled元素----');
var rec=$('input:disabled');
$.each(rec,function(i, v) {
    console.log(v);
});

console.log('----所有input:checked元素----');
var red=$('input:checked');
$.each(red,function(i, v) {
    console.log(v);
});

console.log('----所有select option:selected元素----');
var ree=$('select option:selected');
$.each(ree,function(i, v) {
    console.log(v);
});

console.log('----所有select[name="province"]元素----');
var ref=$('select[value="province"]');
$.each(ref,function(i, v) {
    console.log(v);
});
</script>

运行实例 »

点击 "运行实例" 按钮查看在线实例


运行效果图

属性.png

批改状态：合格

老师批语：其实这些都是css3中的内容, 所以jQuery并不难, 对不对?

版权申明：本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论

文明上网理性发言，请遵守新闻评论服务协议

0 条评论
  • 博主信息
    渊的博客
    渊的博客
    博文
    27
    粉丝
    0
    评论
    0
    访问量
    21042
    积分：0
    P豆：56
    最新更新
    MVC运行原理-2019年10月31日2019-11-01
    ajax表单处理-2019年10月30日2019-10-30
    ajax原理与使用(ajax)2019年10月29日2019-10-30
    Jquery(文档处理、筛选、ajax)2019年10月28日2019-10-29
    javascript基础与Jquery(选择器)2019年10月25日2019-10-27
    javascript基础与Jquery(添加移除属性，添加样式，移除样式)2019年10月24日2019-10-25
    javascript基础与Jquery(方法，对象，JQ基础操作)2019年10月24日2019-10-24
    javascript基础(数组，循环语句，常用函数，跳转，事件)2019年10月23日2019-10-23
    博文分类
    前端开发10篇
    PHP基础8篇
    javascript3篇
    JQuery5篇
    Laravel1篇
    热门文章
    php基础之数组（一维数组，二维数组，三维数组）2902
    前端框架布局（仿荔枝微课前端)-2019年9月12日1517
    选择器与内外边距使用方法（margin,padding使用）-2019年9月4日1126
    php-练习正则表达式练习-2019年10月17日947
    前端封装原理与知识点（HTML手册)-2019年9月11日834
    CSS布局原理与实现（消除浮动影响，绝对定位相对定位与布局)-2019年9月4日826
    会话实战（网页派发器）2019年9月27日784
    javascript基础(数组，循环语句，常用函数，跳转，事件)2019年10月23日735
    提交
    首页视频教程原生手册编程词典

    Copyright 2014-2020 //m.m.sbmmt.com/
    All Rights Reserved PHP中文网 版权所有

    皖B2-20150071-9皖公网安备34010402701654号

    如果有侵犯您的版权或其他权益，请联系邮箱: a@php.cn