jquery选择器

　　 网站焦点图是一种网站内容的展现形式，可简单理解为一张图片或多张图片展现在网页上就是网站焦点图。在网站很明显的位置，用图片组合播放的形式，类似焦点新闻的意思只不过加上了图片。一般多使用在网站首页版面或频道首页版面，因为是通过图片的形式，所以有一定的吸引性、视觉吸引性。容易引起访问者的点击，据国外的设计机构调查统计，网站焦点图的点击率明显高于纯文字，转化率高于文字标题5倍。由此看来焦点图的能让游客对企业的第一印象大大提升，下面就给大家介绍一个我们项目中封装使用的漂亮大气的全屏焦点图。如下图所示： 可添加多个 图片，设定图片链接，导航随鼠标移动切换图片，在发布文章的时候把图片压缩了有点失真。 使用本特效首先需要引入对jquery的使用，插件已经封装成jquery函数，代码如下： /* * jQuery图片轮播(焦点图)插件 */ (function ($) { $.fn.slideBox = function (options) { var defaults = { direction: 'left', duration: 0.6, easing: 'swing', delay: 3, startIndex: 0, hideClickBar: true, clickBarRadius: 5, hideBottomBar: false }; var settings = $

学习要点： 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及运行 jQuery 一．什么是 jQuery jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是 John Resig ，于 2006 年创建的一个开源项目，随着越来越多开发者的加入， jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。 主旨：以更少的代码、实现更多的功能 二．学习 jQuery 的条件 jQuery 是 JavaScript 库，所以 jQuery 在使用上要比原生的 JavaScript 要简单，但是对于网页编程来说，有些通用的基础知识是必备的： 1.XHTML 或 HTML5 （含 CSS ，网页必备的基础技术， XHTML 已完结 90 课）； 2.JavaScript （虽然 jQuery 使用比 JavaScript 简单，但各种语法来自 JavaScript ，只要掌握已出课程的第一季 149 课即可，并不需要完全精通，只要理解语法和项目中简单的用法即可。）；

$("a[id^=abc]") 选择a元素，id以abc开头 $("a[id$=abc]") 选择a元素，id以abc结尾 $("a[href*=com]") 选择a元素，href包含com $("[id^=abc]" + " li") 选择以abc开头任意字符结尾的id下的li元素 　　 来源： https://www.cnblogs.com/indifferent/p/12604820.html

一、操作属性 （一） 获得属性值： 属性值 = attr(属性名) var s = $("#<%=Button1.ClientID%>").attr("type"); （二） 添加或修改属性值：attr("属性名","属性值") $("#Button1").attr("disabled","disabled"); （三） 移除属性：removeAttr("属性名") $("#Button1").removeAttr("disabled"); 二、操作样式 （一） 直接操作内联样式性 1、 获得样式:css("样式属性名") $("#Button1").css("font-style");　　 2、 设置样式:css("样式属性名","样式属性值") $("#Button1").css("font-style","italic"); （二）操作class选择器 1、 添加class:addClass("class名") $("#Button1").addClass("bb"); 2、 移除class:removeClass("class名") $("#Button1").removeClass("bb"); 3、 切换class:toogleClass("class名") $("#Button1").toggleClass("bb"); 三、操作内容 （一）表单元素 1、 赋值

假设有下面这样一段HTML代码： <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</li> <li>jQuery选择器示例</li> </ul> jQuery判断当前元素是第几个元素 如果我们点击任何一个li标签，想知道当前点击的是第几个li标签，可以使用下面的代码： $("ul li").click(function () { var index = $("ul li").index(this); alert(index); }); jQuery 获取第N个元素 同理，如果我们要获取第二li标签元素，可以使用下面的代码 var element=$("ul li").eq(1); alert($(element).html()); <ul> <li>jQuery判断当前元素是第几个元素示例</li> <li>jQuery获取第N个元素示例</li> <li>jQuery选择器示例</li> </ul> jQuery判断当前元素是第几个元素 如果我们点击任何一个li标签，想知道当前点击的是第几个li标签，可以使用下面的代码： $("ul li").click(function () { var index = $("ul li").index(this); alert(index); }); jQuery 获取第N个元素

jQuery 快速、简洁的 JavaScript 框架，设计宗旨： write Less, Do More 。 作用：简化原生 js 的语法，解决浏览器兼容性问题。 引入 jQuery 可以直接引入在线地址，也可以在 jQuery [官方网站][1]上下载，然后使用 src 属性引入： [1]: https://jquery.com/ 基础语法： $(selector).action() $ ： jQuery 对象 selector ：选择器，用于定位 HTML 元素 action() ：方法，用于对元素进行操作 文档就绪函数 //HTML文档加载完成后，再开始执行该方法里面的函数 $(document).ready(function(){ //代码段 }) jQuery 选择器 jQuery 选择器相比原生 javascript 功能更加强大 元素选择器 $('#id') ： id 选择器，类似 document.getElementById("#id") $('.class') ： class 选择器，类似 document.getElementsByClassName('.class') $('tag') ： tag 选择器，类似 document.getElementsByTagName('tag') $('tag.class') ：父子选择器 属性选择器 $("[attr

js的模板引擎就和服务端的差不多，都是更好更快的拼接html用于显示，我参考了文章：http://www.cnblogs.com/zhuzhiyuan/p/3510175.html tmpl常用标签 ${} , {{each}} , {{if}} , {{else}} , {{html}} 不常用标签 {{=}} , {{tmpl}} and {{wrap}} . 1. ${} 等同与 {{=}} 是输出变量 ${} 里面还可以放表达式 （使用 {{=}} 的时候=和变量之间一定要有空格，否则无效，即为： {{= 变量}} ） <div id="div_demo"> </div> <script id="demo" type="text/x-jquery-tmpl"> <div > 　　<span>${ID}</span> 　　<span style="margin-left:10px;">{{= ID}}</span> </div> </script> <script type="text/javascript"> 　　var users = [{ ID: '1111'}]; 　　$("#demo").tmpl(users).appendTo('#div_demo'); </script> 2. {{each}} 提供循环逻辑，$value访问迭代变量 也可以自定义迭代变量(i

在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签 1. children(): 子标签中找 2. find() : 后代标签中找 3. parent() : 父标签 4. prevAll() : 前面所有的兄弟标签 5. nextAll() : 后面所有的兄弟标签 6. siblings() : 前后所有的兄弟标签　 需求: 1. ul标签的第2个span子标签 2. ul标签的第2个span后代标签 3. ul标签的父标签 4. id为cc的li标签的前面的所有li标签 5. id为cc的li标签的所有兄弟li标签 var $ul = $("ul"); //1. ul标签的第2个span子标签 $ul.children("span:eq(1)").css("background","red"); // 2. ul标签的第2个span后代标签 $ul.find("span:eq(1)").css("background","red") // 3. ul标签的父标签 $ul.parent().css("background","red") // 4. id为cc的li标签的前面的所有li标签 var $li = $("#cc"); $li.prevAll("li").css("background","red"); // 5. id为cc的li标签的所有兄弟li标签 $li

基本选择器： $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(".mini").css("background","#bbffaa"); 改变class为mini的所有元素的背景色 $("*").css("background","#bbffaa"); 改变所有元素的背景色 $("span,#two").css("background","#ddffaa"); 改变所有<span>元素和id 为two的元素的背景色 层次选择器 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 $("div span")选取<div>里所有的<span>元素 $("parent>child") 选取parent元素下的child（子）元素，与$("ancestor descendant")有区别，$("ancestor descendant")选择的是后代元素 $("div>span")选取<div>元素下元素名是<span>的子元素 $("prev + next") 选取紧接在prev元素后的next元素 $(".one+div")选取class为none的下一个<div>同辈元素 $("prev~siblings")

jQuery简介 JQuery是继 prototype 之后又一个优秀的 Javascript 库。它是轻量级的js库 ，它兼容 CSS3 ，还兼容各种浏览器（ IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理 HTML （ 标准通用标记语言 下的一个应用）、events、实现动画效果，并且方便地为网站提供 AJAX 交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的 插件 可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。 jQuery是一个兼容多浏览器的 javascript 库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。 jQuery是免费、开源的，使用