1.id选择器:

// 4.如果页面中多个元素id相同,jquery只会获取第一个id的jquery对象
var jquery = $('#name');
alert(jquery.val()); var jquery1 = $('#name');
alert(jquery1.val());

<body>
<input type="text" name="name" id="name" value="张三">
<input type="text" name="name" id="name" value="李四">
</body>

2.class选择器:

 // 5.获取出来的jquery是一个数组,如果页面中多个元素class相同,jquery只会获取第一个id的jquery对象

        var jquery3 = $('.name');
alert(jquery3.val()); // 张三
// 想获取非第一个元素的对象,需要根据索引获取到指定位置的DOM对象后,再转化成jquery对象进行使用
alert($($('.name')[]).val()) <input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">

3.parent—child选择器:

// 6.获取div标签下所有class为name的元素
alert($('div' > .name).length); // 长度为2 <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>

4.prev + next选择器:

匹配所有紧邻在prev元素后的next元素。

 // 7.获取紧邻元素为div的之后的class元素
alert($('div + .name').length); // 只有一个元素,就是value为sssss的 <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">

5.prev ~ siblings选择器:

获取div标签后的所有元素。

 // 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
alert($('div ~ .name').length);
<div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">
// 8.获取div标签后的所有元素,长度为2,值为sssss和ttttt
alert($('div ~ .name').length); <div>
<input type="text" name="name" name ="name" value="张三">
<input type="text" name="name" name ="name" value="李四">
</div>
<div>
<input type="text" name="name" name ="name" value="sssss">
</div>
<input type="text" name="name" name ="name" value="sssss">
<input type="text" name="name" name ="name" value="ttttt">

6.简单过滤选择器:匹配符合条件的元素

7.属性选择器:【attribute】匹配包含给定属性的元素

 // 9.获取所有元素都有value属性的所有元素
alert($('[value]').length);
alert($('.name[value]').length); // 所有class为name的带有value的属性

jQuery学习二的更多相关文章

  1. Jquery 学习二

    一.事件编程 1.基本事件(以方法形式存在的) 基本语法: 原生Javascript代码中的事件绑定方式: DOM对象.事件 = 事件的处理程序   jQuery代码中的事件绑定方式: jQuery对 ...

  2. jquery 学习(二) - 属性操作

    html代码 <div class="n1" zdy="z1">AAA <p>1111111</p> <input t ...

  3. jQuery学习(二) 自定义扩展函数

    jQuery函数调用写法很优雅,在项目开发过程中,有需要自定义函数经常被使用到,将这些函数放置到项目ExtTool.js中,为了编码方式的统一,也希望这些自定义函数与jQuery函数一致的调用方式.在 ...

  4. JQuery学习二(获取元素控件并控制)

    $(’#id‘).+function; 例如: 1 <head> 2 <title>JQuery</title> 3 <script src="js ...

  5. jQuery学习(二)——使用JQ完成页面定时弹出广告

    1.JQuery效果 2.步骤分析: 第一步:引入jQuery相关的文件 第二步:书写页面加载函数 第三步:在页面加载函数中,获取显示广告图片的元素. 第四步:设置定时操作(显示广告图片的函数) 第五 ...

  6. jQuery学习(二)

    操作DOM对象: 修改文本: jQuery对象的text()和html()方法可以用来获取节点的文本内容和HTML文本.而当你给方法传入参数时,这两个方法可以被用于设置jQuery的文本内容. 还是以 ...

  7. JQuery学习二-字典操作

    1. 数组中添加map var arr = []; var key = 'Jeremy'; var value = '!!!!' arr.push({ 'key': key, 'value': val ...

  8. jQuery学习-事件之绑定事件(二)

    在上一篇<jQuery学习-事件之绑定事件(一)>我们了解了jQuery的add方法,今天我们来学习下dispatch方法: dispatch: function( event ) {   ...

  9. jQuery学习之二 jQuery选择器

    一.jQuery选择器是什么1.CSS选择器2.jQuery选择器 二.jQuery选择器的优势1.简洁的写法2.支持从CSS1到CSS3选择器3.完善的处理机制  传统js选择器假如要操作的元素不存 ...

随机推荐

  1. jquerymobile tap事件被触发两次

    首先介绍一下这个问题出现的背景:我在写网站时想要一套代码兼容手机端和pc端,所以用了jquery和jquery mobile,点击事件用的jquerymobile tap事件,但是在移动端测试时出现点 ...

  2. python+request 常用基础学习笔记

    1.pycharm,避免控制台输出的json内容中文出现乱码. #注:乱码为Unicode格式:\u6d4b\u8bd5.加入如下代码后正确返回中文:测试 get_result = r.json() ...

  3. latex 表格每行设置不同字体

    Each cell of a table is set in a box, so that a change of font style (or whatever) only lasts to the ...

  4. QQ龙虎榜数据接口

    1.个股全部上榜日期 strUrl.Format(L"http://stock.finance.qq.com/cgi-bin/sstock/q_lhb_js?t=1&c=%06d&q ...

  5. Codeforces Round #336 (Div. 2) D. Zuma(区间DP)

    题目链接:https://codeforces.com/contest/608/problem/D 题意:给出n个宝石的颜色ci,现在有一个操作,就是子串的颜色是回文串的区间可以通过一次操作消去,问最 ...

  6. Codeforces Round #555 (Div. 3) C1,C2【补题】

    D1:思路:L,R指针移动,每次选最小的即可. #include<bits/stdc++.h> using namespace std; #define int long long #de ...

  7. MD5加密的引用

    使用MD5 加密时 需要在后台代码中添加using System.Security.Cryptography; 引用 //MD5加密密码 byte[] a = MD5.Create().Compute ...

  8. Linux操作系统常用命令合集——第六篇-压缩和归档操作(16个命令)

    1.gzip [命令作用] 压缩和解压缩文件 gzip/guzip/zcat zcat:不显式展开的前提下查看文本文件内容 zdiff/zgrep/zless/zmore [命令语法]  gzip   ...

  9. P3939 数颜色 线段树动态开点

    P3939 数颜色 线段树动态开点 luogu P3939 水.直接对每种颜色开个权值线段树即可,注意动态开点. #include <cstdio> #include <algori ...

  10. 分治FFT学习笔记

    用途 在\(O(n\log^2 n)\)的时间内做诸如 \[ f_n=\sum_{i=0}^{n-1} f_ig_{n-i} \] 或是 \[ f_n=\sum_{i=0}^{n-1} f_if_{n ...