ul> li> ul> LABEL1label> input type="text" value="text1"/> input type...问题 1:获取所有 ul 下的所有 li 元素,并打印分析结果 p> 问题 2:获取 id 为 myul 下的所有子 li 元素,并打印分析结果... $(function () { // 问题 1:获取所有 ul 下的所有 li 元素,并打印分析结果 console.log($('ul li...label 元素后的 input 元素,并打印分析结果 console.log($('label + input')); }); script> 八、过滤选择器 1、定义 过滤选择器...:通过特定的过滤规则来筛选所需要的 DOM 元素,过滤规则与 CSS 中的伪类选择器语法相同。
该列表被动态转换成悬停、静态和活动状态的水平导航栏,全都可以使用 jQuery Mobile 主题框架进行定制。 清单 3....使用 jQuery Mobile 框架创建基本链接列表 ul data-role="listview"> li>List item 1li> li>使用图标、缩略图和计数泡泡来创建不同的视觉样式。您可以通过使用 ul-li-count 类,将计数泡泡添加到一个列表项(清单 9)。 清单 9....Led Zeppelin Ten Years li> ul> 您可以使用与添加缩略图一样的方法来添加图标;惟一的区别是您要使用 ui-li-icon...例如,如果您有一个员工姓名列表,并且您将一个搜索筛选器栏添加到该列表,用户就能够通过向搜索筛选器文本输入键入一个或多个字符,来筛选和缩小在该页面上显示的结果范围。
(a))")// 找到所有后代中不含a标签的li标签 练习: 自定义模态框,使用jQuery实现弹出和隐藏功能。...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的 等价于 $("div.c1") 补充: .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素...、keydown等DOM中定义的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件: $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时,它通常不需要显式地循环的 .each()方法: 也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了: $("li").addClass("c1"); // 对所有标签做统一操作
(常见应用:开发中的小图标,其实是一张图片,用css来定位,这样网站的请求就会减少) Prototype,是对js的扩展,做框架开发中使用。 YUI(Yahoo!...jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。...由美国人 John Resig 在2006年1月发布 jQuery 是免费、开源的 jQuery 的分类: WEB版本:我们主要学习研究用的 UI版本:集成了UI组件,做图形化页面的 mobile版本...、使用Ajax以及其他功能 jQuery能够使用户的html页面保持代码和html内容分离 不用再在html里面插入一堆js来调用命令了,只需要定义id即可 jQuery提供API让开发者编写插件,有许多成熟的插件可供选择...()); // 3、将 jQuery对象 转换成 js的dom对象 // 3.1、方式一:jQuery对象内部使用【数组】来存放所有的数据,可以通过数组的索引进行获取
很多时候,美工会觉得默认的select下拉框很难看(特别是右侧的下拉箭头按钮),他们通常喜欢用一个自定义的图标来代替这个按钮。...这样就只能用 js + div 来模拟了,倒腾了一番,用jQuery模拟了下,当然网上这种文章也不少,只是懒得去看找,又重新发明轮子鸟:) select2"> ul> li>CN 中文li>...ul> input type="text" id="txtSrc" onkeyup="fnTest()"...不足之处: 1、按键盘上下键时,没有高亮的自动移动 2、键入文字自动过滤结果时,感觉相对原生的select有些不自然
3.jQuery 对象和 Dom 对象使用的区别 JQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 JQuery 对象的属性和方法 4.DOM 对象 和 jQuery 对象互转...select> Button jQuery 代码: $(":input") 运行结果:...ul> // jQuery $("li").has("ul").css("background-color", "red"); 2.查找 查找 jQuery 对象内部的元素的子孙/兄弟/父母元素, 并封装成新的...li> ul> li>22222li> 添加新的li // jQuery $("ul>li").click...li>"); }); // 运行结果 ul> li>11111li> li>1111111li> li>111111111li> li>11111111111<
(a))")// 找到所有后代中不含a标签的li标签 练习: 自定义模态框,使用jQuery实现弹出和隐藏功能。... li> ul> jquery/3.3.1/jquery.min.js">的事件,我们都可以使用`.on()`方法来绑定事件,但是`hover`这种jQuery中定义的事件就不能用`.on()`方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件: $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时,它通常不需要显式地循环的 .each()方法: 也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了: $("li").addClass("c1"); // 对所有标签做统一操作
绑定简单事件 在DOM中DOM0级绑定事件的方式是直接给事件属性赋值,但是这样有个缺点就是每次指定的事件处理程序会把之前的覆盖掉。...= $('.input-box input'); // jQuery构造函数传入选择器,返回的是一个jQuery的包装对象 // 大部分的api都是在jQuery包装对象上 /...标签放到 省的select下面 // jQuery的html方法已经对ie8的 select设置innerHTML的bug做了相关处理。...$("p").slideToggle(); }); 以后推荐大家使用on的方式 上课代码: ul class="list"> li>1li> li>2li> li...on的方式 上课代码: input type="button" value="按钮" id="btn"> ul class="list"> li>1li> li>2li
li> li>Ralphli> ul> jQuery代码 $("ul li:first-child") 结果 [li>Johnli>,li>Glenli>] ...>55555li> li>66666li> ul> jQuery代码 $("ul li:last-child") 结果 [li>33333li>,li>66666...li>44444li> ul> jQuery代码 $("ul li:only-child") 结果 [li>44444li>] 表单 input //概述 //匹配所有的...内容·和个函数 不能用XML文档·但可以用于XHTML文档· //在一个HTML文档中,我们可以使用.html()方法来获取任意一个元素的内容·如果选择匹配多余一个的元素,那么只有第一个匹配元素的HTML...ul> jQuery代码 $("li").last() 结果 [li>list item3li>] has //概述 //检查当前的元素是否含有某个特定的类,如果有,则返回true
它还具有良好的跨浏览器兼容性,能够确保网页在主流浏览器中的一致性。 此外,Bootstrap 提供了丰富的可定制性,开发者可以通过修改变量或定制化 CSS 来调整样式。...| Bootstrap 中文网 我这里举个使用的例子: 先找到自己需要的页面样式 复制代码到自己页面上就能显示相同的效果 像上面那个因为代码太长,官网没有直接给出源码的,可以点开F12工具,或者右键检查...博客 像之前也写了一个用户管理案例,但页面不是很美观,基本的逻辑都是通的,本篇博客着手BootStrap组件库,带你使用BootStrap快速制作一个美观的页面。...,使用正则表达式可以使url变得动态起来。...key=value 通过 URL 路径传递信息,格式为 / 服务器端获取方式 使用 request.GET 获取参数值 使用 Django URL 配置中的路径参数获取 适用场景 通常用于过滤
)') $('ul li:first()')[0].innerText //1 //last $('ul li:last()') $('ul li').last() //eq $('ul li:eq(1...)') //even $('ul li:even()') //odd $('ul li:odd()') //gt $('ul li:gt(2)') //lt $('ul li:lt(2)') //not...).siblings();// 兄弟们 //find 等价于$("div p") $("div").find("p") //filter $("div").filter(".c1") // 从结果集中过滤出有...、keydown等DOM中定义的事件,我们都可以使用.on()方法来绑定事件,但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。...想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件: $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(
DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的方法,卵用会报错 约定:如果获取的是jQuery对象,那么在变量前面加上$ var $...).val()) }) 3.2 筛选器 3.2.1 过滤筛选器 $("li").eq(2) $('li').first() $("ul li").hasClass...//像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此 //需要使用prop方法去操作才能获得正确的结果。...('click');})就是筛选出ul下的li给其绑定 // click事件; [selector]参数的好处: 好处在于.on方法为动态添加的元素也能绑上指定事件;...);}方式绑定,然后动态添加 //li:$('ul').append('li>js new lili>');这个新生成的li被绑上了click事件 [data]参数的调用
虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错 约定:如果获取的是 jQuery...ul> li>1li> li>2li> li>3li> ul> li">Add_li 像checkbox,radio和select这样的元素,选中属性对应“checked”和“selected”,这些也属于固有属性,因此 //需要使用prop方法去操作才能获得正确的结果。...只是结束了当前的函数,并不会影响后面函数的执行 //本来这样没问题,但因为我们的需求里有很多这样的情况:我们不管循环到第几个函数时,一旦return了, //希望后面的函数也不再执行了...) 扩展 jQuery 元素集来提供新的方法(通常用来制作插件) 增加两个插件方法: input type="checkbox"> input type="checkbox"> input
> $(":selected") // 找到所有被选中的option 筛选器方法(将来用的很多) 选择器或者筛选器选择出来的都是对象,而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法,...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的,从所有的div标签中过滤出有class='c1'属性的div,和find不同,find是找div标签的子子孙孙中找到一个符合条件的标签...、keydown等DOM中定义的事件,我们都可以使用.on()方法来绑定事件,但是hover这种jQuery中定义的事件就不能用.on()方法来绑定了。 ...想使用事件委托的方式绑定hover事件处理函数,可以参照如下代码分两步绑定事件: $('ul').on('mouseenter', 'li', function() {//绑定鼠标进入事件 $(...当这种情况发生时,它通常不需要显式地循环的 .each()方法: 也就是说,上面的例子没有必要使用each()方法,直接像下面这样写就可以了: $("li").addClass("c1");
>li>Javali>li>C#li>li>PHPli>li>C++li>ul>$("ul").wrapInner(""); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例。...slice( ) 按起始索引获取匹配元素中的子集 下面通过一个示例来演示eq、first、last和slice函数的用法,这几个函数有个共同点:都是通过索引进行过滤的。...任务实训部分 1:动态管理树形菜单 训练技能点 Ø jQuery节点操作 需求说明 使用jQuery节点操作函数对树形菜单进行动态添加和删除,如图7.2.1所示。...训练技能点 Ø jQuery节点操作 需求说明 使用jQuery节点操作函数对行进行动态添加和删除。
3.JQuery流行程度 jQuery现在已经成为最流行的javascript库,在世界前10000个访问最多的网站中,有超过55%在使用jQuery。...Jquery 的初体验 需求:使用Jquery和javascript给一个按钮绑定单击事件 注意:使用Jquery之前要将第三方jar包导入 jquery对象是一个Dom对象的数组 + jquery 的一系列功能函数的总和。 Jquery对象和Dom对象使用区别?...; 表单过滤器 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有 文本输入框 :password 匹配所有的密码输入框 :radio... ul id="phone">li>IOSli>li id="android">Androidli>li>Windows Phoneli>ul>
> li>Javali> li>C#li> li>PHPli> li>C++li> ul> $("ul").wrapInner...(""); 上述代码使用wrapInner函数包裹ul中的所有li子元素 7.1.6 复制节点 clone函数用来复制节点,下面是该函数的一个示例...个元素 slice( ) 按起始索引获取匹配元素中的子集 下面通过一个示例来演示eq、first、last和slice函数的用法,这几个函数有个共同点:都是通过索引进行过滤的。...任务实训部分 1:动态管理树形菜单 训练技能点 Ø jQuery节点操作 需求说明 使用jQuery节点操作函数对树形菜单进行动态添加和删除,如图7.2.1所示。...训练技能点 Ø jQuery节点操作 需求说明 使用jQuery节点操作函数对行进行动态添加和删除。
来获取option的值) 演示样例描写叙述:查找全部选中的复选框元素 HTML 代码: input type=”checkbox” name=”newsletter” checked...selected”>Gardens Trees select> jQuery 代码: $(“select option...ul> ul> li>Glenli> li>Taneli> li>Ralphli> ul> jQuery 代码: $(“ul li:nth-child(...li> ul> jQuery 代码: $(“ul li:last-child”) 结果: [ li>Brandonli>, li>Ralphli> ] :only-child...> ul> li>Glenli> ul> jQuery 代码: $(“ul li:only-child”) 结果: [ li>Glenli> ] 版权声明:本文博主原创文章
ul class="select"> li>... ul class="select"> li> input id="q2_... ul class="select"> li> input...[type='radio']:checked + label:hover:after {color: #c733c5;} ul.select{margin-top:30px} ul.select li{...ok,这里细心的基本都可以看到我的js是写的不完整的,毕竟很多,这样的排列的组合是很多的,所以感兴趣的可以直接自己补充,他的预算次数是2的3次方,那么如果有五个选项九个页面的话那就是5的9次方,所以我是没有那么多的精力实现的