jQuery-筛选器

<script>
$(document).ready(function(){
$("#but10").click(function(){
    $("p:first").toggle();        //("x:first")
  });    //第一个x 筛选器

  $("#but11").click(function(){
    $("p:not(#xxx)").toggle();        //("x:not(s)")     s:x的属性
  });    //不是x的s的 筛选器

  $("#but12").click(function(){
    $("p:even").toggle();        //("x:even")   查找1,3,5行  0,2,4计数
  });    //奇数行 筛选器

  $("#but13").click(function(){
    $("p:odd").toggle();        //("x:odd")   查找2,4,6行  1,3,5计数
  });    //偶数行 筛选器

  $("#but14").click(function(){
    $("p:eq(2)").toggle();        //("x:eq(n)")  n:数字  0开始计数
  });    //查找x的第n行 筛选器

  $("#but15").click(function(){
    $("p:gt(2)").toggle();        //("x:gt(n)")
  });    //查找x的比n大的行数 筛选器

  $("#but16").click(function(){
    $("p:lang(xxx)").toggle();        //("x:lang(s)")
  });    //x的lang=s和他的后代 筛选器

  $("#but17").click(function(){
    $("p:last").toggle();        //("x:last")
  });    //最后一个x 筛选择器

  $("#but18").click(function(){
    $("p:lt(2)").toggle();        //("x:lt(n)")
  });    //查找x的比n小的行数 筛选器

  //筛选器

  $("#but19").click(function(){
    $(":header").css("background", "red");
  });    //给hx标题加上背景颜色

  $("#but20").click(function(){
  $("div").animate({ left: "+=20" });
});

  $("#but21").click(function(){
        //
  });    //

  $("#but22").click(function(){
    $(":root").css("background-color","yellow");
  });    //给html加上背景颜色

  $("#but23").click(function(){
    $("p:first").toggle();        //("x:first")
  });    //

  //

});
</script>
<body>
<input id="but10" type="button" value="第一个">
<input id="but11" type="button" value="未选中">
<input id="but12" type="button" value="奇数">
<input id="but13" type="button" value="偶数">
<input id="but14" type="button" value="n行">
<input id="but15" type="button" value="比n大行">
<input id="but16" type="button" value="属性">
<input id="but17" type="button" value="最后一个">
<input id="but18" type="button" value="比n小">
<input id="but19" type="button" value="标题背景">
<input id="but20" type="button" value="动画">
<input id="but21" type="button" value="不会">
<input id="but22" type="button" value="背景颜色">
<input id="but23" type="button" value="不懂">
</body>
时间: 2024-12-25 16:03:25

jQuery-筛选器的相关文章

jQuery筛选器及对DOM修改(学习笔记)

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; char

jQuery筛选器

一.jQuery常用筛选器有以下几种: 1.下一个标签 $(document).next() 2.上一个标签 $(document).prev() 3.父亲标签 $(document).parent() 4.孩子标签 $(document).children() 5.兄弟标签 $(document).siblings() 6.子孙中查找 $(document).find('.i1') /*在子孙中查找class属性为i1的标签*/ 二.具体应用 实现点击菜单栏出现当前菜单下的内容,并隐藏其它菜单

【jquery】jquery筛选器规则

转载自:http://blog.csdn.net/lijinwei112/article/details/6938134 筛选器中加入变量 var ac = "select_" + checkBox_val + "_checkbox"; $('input[id*='+ac+']').each(function(){ $(this).attr("checked",true); }); 在Web应用程序中,大部分的客户端操作都是基于对象的操作,要操作

JQuery筛选器的使用 (转)

jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对象. 1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id") ·element 根据给定的元素名匹配所有元素.例如:$("div") ·.class 根据给定的类匹配元素.例如:$(".style1"); ·* 匹配所有元素.例如:$("*") ·selecto

JQuery筛选器全系列介绍

1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素.例如:$("#id")·element 根据给定的元素名匹配所有元素.例如:$("div")·.class 根据给定的类匹配元素.例如:$(".style1");·* 匹配所有元素.例如:$("*")·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回.例如:$("#id,div,.style1"

【jQuery】总结:筛选器、控制隐藏、操作元素style属性

筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+"]").show(); <!-- 1.--> $(":checkbox[name=select_" + id + "_checkbox][checkbox=true]").each(function(){ }); <!-- 2.-

jquery 选择器、筛选器、事件绑定与事件委派

一.jQuery简介 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTMLdocuments.events.实现动画效果,并且方便地为网站提供AJAX交互. jQuery的引入 <script src='jquery 3.3.1.js'></script>//引入jQuery代码(模块) <script type="text/javascript"> //写自己的js或者jquery代码 </script>

jQuery选择器和筛选器(2)

一.jQuery选择器和筛选器总体 1. 选择器 1)基本选择器 (1) 标签选择器:$("标签名")      例:$("p")   $("div")                         // p ,div 这些都是html中的固定标签,你可以将它换成别的标签名称 (2) id选择器: $("#id名称")        例:$("#id")  $("#username")

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法 一丶什么是JQuery JQuery: ???????JQuery是js的一个库,高度封装了js常用的功能,提供简便方法,调用简单,提高开发效率 ??????js库是包含了把复杂的功能封装到简单的方法中 JQuery的两大特性: ???????链式编程:可以.的形式实现多个功能 ?

jQuery选择器,筛选器,属性选择器

jQuery jQuery介绍 jQuery是一个轻量级的.兼容多浏览器的JavaScript库. jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方便地进行Ajax交互,能够极大地简化JavaScript编程.它的宗旨就是:“Write less, do more.“ jQuery的优势 一款轻量级的JS框架.jQuery核心js文件才几十kb,不会影响页面加载速度. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻