1.jQuery筛选器


注意:请先在管理Nuget程序包中查找jQuery包,并安装。也可以在jQuery官网下载。

实现:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
  <script type="text/javascript" src="Scripts/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    $(function () {                         //相当于onload = function(){};等页面元素加载完成后调用内部内容。
      $('*').css('color', 'Green');                  //通用选择器
      $('#Sidebar').css('border-bottom', '2px solid red');     //id选择器
      $('h1').bind('click', function () { alert('Hell world') });     //元素选择器
      $('.示范类').addClass('稍等片刻').hide(10000); //类选择器
      $('footer , header').slideUp('slow').slideDown('slow');    //分组选择器
      $('#Sidebar img').fadeTo(5000, 0.5);            //合并选择器
    });
</script>
</head>
<body id="dv">
<form id="form1" runat="server">
<div>
<header>页眉</header>
  <div id="Sidebar">
    <p>我是sidebar中的文字,图片君在下面</p>
    <img src="resource/QQ图片20150617105836.jpg" style="height :150px;width:150px" />
    </div>
      <h1>基本选择器</h1>
    <div class ="示范类">我是一个div,我要消失了</div>
    <footer>页脚</footer>
    </div>
  </form>
</body>
</html>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>筛选器</title>
  <script src="Scripts/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    $(function () {
    //基本筛选器
    $('#测试表').css('background-color', 'green');        
    $('#测试表 tr:first').css('background-color', 'red');
    $('#测试表 tr:last').css('background-color', 'red');
    $('#测试表 tr:odd').css('background-color', 'red');
    $('#测试表 tr:eq(0)').css('background-color', 'green');
    $('#测试表 tr:eq(2)').css('background-color', 'green');
    $('#测试表 tr:eq(4)').css('background-color', 'green');
    $(':header').css('color', 'green');

    //高级筛选器
    $('td:contains("3行")').css('color', 'green');
    $(':header:has("span")').css('color', 'green');
    $('[type]').css('color', 'green');
    $('input[type]').css('color', 'green');
    $('[type=text]').css('color', 'green');
    $(':button ,:text').css('color', 'green');
    $(':checkbox').attr('checked',true);

});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
  <h1 title="头部">第一部分</h1>
  <table id="测试表">
    <tr><td>1行1列</td><td>1行2列</td></tr>
    <tr><td>2行1列</td><td>2行2列</td></tr>
    <tr><td>3行1列</td><td>3行2列</td></tr>
    <tr><td>4行1列</td><td>4行2列</td></tr>
    <tr><td>5行1列</td><td>5行2列</td></tr>
  </table>
  <h2>
  第二<span style="font-style:initial;font-weight:bold;">部分</span>
  </h2>
  <input id="Button1" type="button" value="button" />
  <input id="Text1" type="text"/>
  <input id="CheckBox1" type="checkbox" />
  <input id="CheckBox2" type="checkbox" />
</div>
</form>
</body>
</html>

2.对DOM的修改

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>jQ修改DOM</title>
  <script src="Scripts/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    //css方法
    $(function () {
      //css方法
      $('h1').css('background-color', 'green');//css(属性,值)
      alert($('h2 span').css('font-style'));//css(属性)
      $('#测试表 td').css({ 'color': 'red', 'font-family': 'Verdana', 'padding': '0px' });//css(样式表)

      $('h2').addClass('稍等片刻');
      $('h2').removeClass('稍待片刻');//使用addClass,removeClass,toggleClass来进行类操作

      alert($('h1').attr('title'));//attr(属性名)
      $(':checkbox').attr('checked', 'checked');//attr(属性名,属性值)

      //事件
      $('#测试表 tr')
      .bind('mouseover', function () { $(this).css('background-color', 'yellow') })
      .bind('mouseout', function () { $(this).css('background-color', '') });

      //jQ功能
      $('#测试表 td').each(function () {//each遍历一个集合
      alert(this.innerHTML);
      });
      alert($('#测试表 td:contains("1行2列")').prev()[0].innerHTML);//prev匹配元素直系兄弟
      alert($('#测试表 td:contains("1行2列")').parent()[0].innerHTML);//方法返回被选元素的直接父元素
      });
</script>
</head>
<body>
  <h1 title="头部">第一部分</h1>
  <table id="测试表">
    <tr><td>1行1列</td><td>1行2列</td></tr>
    <tr><td>2行1列</td><td>2行2列</td></tr>
    <tr><td>3行1列</td><td>3行2列</td></tr>
    <tr><td>4行1列</td><td>4行2列</td></tr>
    <tr><td>5行1列</td><td>5行2列</td></tr>
  </table>
  <h2>
  第二<span style="font-style:inherit;font-weight:bold;">部分</span>
  </h2>
<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />
<input id="CheckBox1" type="checkbox" />
<input id="CheckBox2" type="checkbox" />
</body>
</html>


jQuery筛选器及对DOM修改(学习笔记)的更多相关文章

  1. jQuery 筛选器1

    jQuery 筛选器1 筛选器1: 在选择器选择的基础上在选择一次 // 当前点击的标签$(this) $(this) // .next() 获取当标签的下一个标签 $(this).next(); / ...

  2. jQuery 筛选器2

    jQuery 筛选器2 // 由于$()只能输入字符串$('#li:eq(1)'),可通过.eq()来传入. // 获取this标签中的指定属性 $(this).eq(1) // 获取第一个元素 $( ...

  3. HTML DOM(学习笔记二)

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

  4. 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记

    <疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...

  5. HTML DOM简易学习笔记

    文字版:https://github.com/songzhenhua/github/blob/master/HTML DOM简易学习笔记.txt 学习地址:http://www.w3school.co ...

  6. jQuery筛选器及练习

    jQuery初识   jQuery是什么? jQuery是一个兼容多浏览器的JavaScript库. jQuery能极大地简化JavaScript编程,它的宗旨就是:"Write less, ...

  7. 【jQuery】jQuery筛选器规则

    转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + ...

  8. jQuery筛选器常用总结

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  9. jQuery笔记-jQuery筛选器children()详解

    jQuery的选择包含两种,一种是选择器,一种是筛选器.筛选器是对选择器选定的jQuery对象做进一步选择. children()是一个筛选器,顾名思义就是筛选孩子,筛选那些符合条件的孩子. 完整的格 ...

随机推荐

  1. Softmax回归(Softmax Regression, K分类问题)

    Softmax回归:K分类问题, 2分类的logistic回归的推广.其概率表示为: 对于一般训练集:                     系统参数为:      Softmax回归与Logist ...

  2. 不用循环,、es6创建一个长度为100的数组

    问题描述:在不使用循环的条件下,如何创建一个长度为100的数组,并且数组的每一个元素是该元素的下标? 结果为: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1 ...

  3. uiwebview与objective-c

    利用oc调用js很简单, 系统直接提供了方法stringByEvaluatingJavaScriptFromString [webView stringByEvaluatingJavaScriptFr ...

  4. Oracle作业5——多表查询、子查询

    一.基础练习: 1.查询和scott相同部门的员工姓名ename和雇用日期hiredate SELECT ENAME,HIREDATE FROM EMP WHERE DEPTNO=(SELECT DE ...

  5. mongodb3.4.0复制集的搭建

    本次主要介绍一下我们项目中关于mongodb复制集的搭建过程. 部署三台mongodb,分别是在69,70,71上面.71上面是主节点,69和70是从节点.使用mongodb3.4.0版本. 先看一安 ...

  6. 初学JavaScript从入门到放弃(一)JavaScript介绍、变量、数据类型

    一.JavaScript介绍 1.JavaScript:轻量级的客户端脚本语音 2.目前js已经不仅仅是客户语音,基于NODE可以做服务器端程序,所以Javascript是全栈编程语音 3.js及部分 ...

  7. LeetCode 中级 -二叉树的层次遍历(102)

    题目描述: 给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3 / \ 9 20 / \ 15 ...

  8. 并发、并行与C++多线程——基础一

    1.什么是并发? 并发指的是两个或多个独立的活动在同一时段内发生.生活中并发的例子并不少,例如在跑步的时候你可能同时在听音乐:在看电脑显示器的同时你的手指在敲击键盘.这时我们称我们大脑并发地处理这些事 ...

  9. 编程界失传秘术,SSO单点登录,什么是单点,如何实现登录?

    单点登录 多系统,单一位置登录,实现多系统同时登录的一种技术. 常出现在互联网应用和企业级平台中. 如:京东. 单点登录一般是用于互相授信的系统,实现单一位置登录,全系统有效的. 三方登录:某系统,使 ...

  10. jquery仿移动端支付宝键盘

    最近做项目时碰到一个需求,就是在移动端支付页面点击支付按钮弹出一个支付键盘,类似于支付宝的那种.由于项目只是单纯的手机网站,而并非app,所以这个功能得由前端来实现.话不多说,先上图看看效果. 尼玛, ...