jquery 基础-记住
jquery最为一个库,简便。
难点在于选择器,筛选器的使用。
属性一般都是,jquery对象.函数(),括号内部添属性。
s= '<tr> <td class="fix">num</td> <td>user</td> <td>hobby</td> <td> <button class="edit" type="button">编辑</button> <button class="del">删除</button> </td></tr>'
s= s.replace('num',num2)
s= s.replace('user',user_put)
s=s.replace('hobby',hobby_put)
上段代码,是添加一项记录是采用python %s 类似的模式,先搞出一个模板,之后往里添参数。 $(this).parent().prevUntil(fix,'td')
prebUntil的使用,fix是class的名字 ,td是元素的类型,until不顾尾
$(this).parent().parent().remove()
删除标签,支持链式模式 在做添加操作的时候发现新添加的项绑定button失效,
原因是在js执行的时候,button只绑定已经存在button,
所以在将绑定做成函数,在新添加后面再调用一次,否则button没有效果。
在添加操作中,后添加的对象没有被绑定button,解决方法,使用on('','','','')的绑定方法。就是给当前标签的父元素添加一个时间,然后拍给子标签去执行。
// 事件绑定on方法 // $("button").click(function () {
// alert(123)
// }); // $("button").on("click",function () {
// alert(123)
// }); // 事件委派 // $("button").click(function () {
// var $li=$("<li>"); // <li></li>
//
// $li.html("444");
//
// $("ul").append($li)
// });
//
//
// $("ul").on("click","li",function () {
// alert(123)
// });
委派,动态添加
添加一个标签
$li=$("<li>") #$li中的$是说明li是jquery对象$(
"li:eq(2)"
)
#中的2指的是第几个,数组的形式。
$("li:gt(1)") #中的1指的是从第一个开始查找,结果不包括1即开始位。$(
"li:even"
)
#跳着取,隔一个取一个
查找子标签: $("div").children(".test") $("div").find(".test") 向下查找兄弟标签: $(".test").next() $(".test").nextAll()
$(".test").nextUntil() 向上查找兄弟标签: $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签: $("div").siblings()
查找父标签: $(".test").parent() $(".test").parents()
$(".test").parentUntil()
jQuery 选择器
选择器 |
实例 |
选取 |
---|---|---|
$("*") |
所有元素 |
|
$("#lastname") |
id="lastname" 的元素 |
|
$(".intro") |
所有 class="intro" 的元素 |
|
$("p") |
所有 <p> 元素 |
|
.class.class |
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
$("p:first") |
第一个 <p> 元素 |
|
$("p:last") |
最后一个 <p> 元素 |
|
$("tr:even") |
所有偶数 <tr> 元素 |
|
$("tr:odd") |
所有奇数 <tr> 元素 |
|
$("ul li:eq(3)") |
列表中的第四个元素(index 从 0 开始) |
|
$("ul li:gt(3)") |
列出 index 大于 3 的元素 |
|
$("ul li:lt(3)") |
列出 index 小于 3 的元素 |
|
:not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素 |
$(":header") |
所有标题元素 <h1> - <h6> |
|
所有动画元素 |
||
$(":contains('W3School')") |
包含指定字符串的所有元素 |
|
$(":empty") |
无子(元素)节点的所有元素 |
|
:hidden |
$("p:hidden") |
所有隐藏的 <p> 元素 |
$("table:visible") |
所有可见的表格 |
|
s1,s2,s3 |
$("th,td,.intro") |
所有带有匹配选择的元素 |
$("[href]") |
所有带有 href 属性的元素 |
|
$("[href='#']") |
所有 href 属性的值等于 "#" 的元素 |
|
$("[href!='#']") |
所有 href 属性的值不等于 "#" 的元素 |
|
$("[href$='.jpg']") |
所有 href 属性的值包含以 ".jpg" 结尾的元素 |
|
$(":input") |
所有 <input> 元素 |
|
$(":text") |
所有 type="text" 的 <input> 元素 |
|
$(":password") |
所有 type="password" 的 <input> 元素 |
|
$(":radio") |
所有 type="radio" 的 <input> 元素 |
|
$(":checkbox") |
所有 type="checkbox" 的 <input> 元素 |
|
$(":submit") |
所有 type="submit" 的 <input> 元素 |
|
$(":reset") |
所有 type="reset" 的 <input> 元素 |
|
$(":button") |
所有 type="button" 的 <input> 元素 |
|
$(":image") |
所有 type="image" 的 <input> 元素 |
|
$(":file") |
所有 type="file" 的 <input> 元素 |
|
$(":enabled") |
所有激活的 input 元素 |
|
$(":disabled") |
所有禁用的 input 元素 |
|
$(":selected") |
所有被选取的 input 元素 |
|
$(":checked") |
所有被选中的 input 元素 |
jquery 基础-记住的更多相关文章
- JQuery基础知识(2)
JQuery基础知识(2) JQuery滑动效果 1. JQuery slideDown(); 语法: $(selector).slideDown(speed,callback); 可选的 speed ...
- 《jQuery基础教程(第四版)》学习笔记
本书代码参考:Learning jQuery Code Listing Browser 原书: jQuery基础教程 目录: 第2章 选择元素 1. 使用$()函数 2. 选择符 3. DOM遍历方法 ...
- jQuery基础课程
环境搭建 搭建一个jQuery的开发环境非常方便,可以通过下列几个步骤进行. 下载jQuery文件库 在jQuery的官方网站(http://jquery.com)中,下载最新版本的jQuery文件库 ...
- JQuery基础总结上
最近在慕课网学习JQuery基础课程,发现只是跟随网站的课程学习而不去自己总结扩展的话,很难达到真正学会理解的地步. 于是先在网站上草草过了一遍课程,然后借着今天的这个时间边记录边重新整理学习一下. ...
- jQuery基础之选择器
摘自:http://www.cnblogs.com/webmoon/p/3169360.html jQuery基础之选择器 选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Aja ...
- jquery基础知识汇总
jquery基础知识汇总 一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库.源码戳这 jQu ...
- 【jQuery基础学习】09 jQuery与前端(这章很水)
这章主要是将如何将jQuery应用到网站中,或者说其实就是一些前端知识,对于我这种后端程序来说其实还是蛮有用的. 关于网站结构 文件结构 前端文件分三个文件夹放 images文件夹用来存放将要用到的图 ...
- 【jQuery基础学习】00 序
作为一个从来没有认真学过jQuery的菜来讲,我所学的都是jQuery基础. 算是让自己从0开始系统学一遍吧.学习书籍为:<锋利的jQuery>. 虽然是个序,表示一下我是个菜,但还是来几 ...
- 8、网页制作Dreamweaver(jQuery基础:安装、语法)
在<网页制作Dreamweaver(悬浮动态分层导航)>中,运用到了jQuery的技术,轻松实现了菜单的下拉.显示.隐藏的效果,不必再用样式表一点点地修改,省去了很多麻烦,那么jQuery ...
随机推荐
- 01-TCP/IP概述
TCP/IP 概述 允许不同厂家的各种型号的计算机使用不同操作系统互相进行通信 真正的开放系统 "全球互联网"或"因特网"的基础 2.分层 网络协议通常分不同层 ...
- base_基础
目录 A B C D E F G H I J K L M N S: Sqlite: 1;orhanobut/hawk; A: Adapter: 图片处理 Android中自定义布局中加载图片Bitma ...
- Mybatis 系列7-结合源码解析核心CRUD 配置及用法
[Mybatis 系列10-结合源码解析mybatis 执行流程] [Mybatis 系列9-强大的动态sql 语句] [Mybatis 系列8-结合源码解析select.resultMap的用法] ...
- postgresql数据库常用操作命令及SQL语言
(1)登录 peng@peng-virtual-machine:~$ sudo -u postgres psql 以用户postgres身份登录,postgres为用户名,可有多个用户,登录时会要求输 ...
- (转)Linux tcpdump命令详解
简介 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...
- nonlocal和global
获取变量时遵循LEGB原则,修改变量时需要global/nonlocal进行修改 global # global的使用 函数外定义了全局变量: global关键字在函数内会修改全局变量 函数外没定义全 ...
- 第11章 拾遗5:IPv6和IPv4共存技术(1)_双栈技术和6to4隧道技术
6. IPv6和IPv4共存技术 6.1 双栈技术 (1)双协议主机的协议结构 (2)双协议栈示意图 ①双协议主机在通信时首先通过支持双协议的DNS服务器查询与目的主机名对应的IP地址. ②再根据指定 ...
- 第32课 Linux内核链表剖析
1. Linux内核链表的位置及依赖 (1)位置:{linux-2.6.39}\\include\linux\list.h (2)依赖 ①#include<linux\types.h> ② ...
- react mobx webpack 使用案例
1.package.json: { "name": "wtest", "version": "1.0.0", " ...
- 电商系统架构总结4(webapi 版本控制)
为了 顺利迭代升级,web api 在维护过程是不断升级的,但用户是不能强迫他们每次都跟随你去升级,这样会让用户不胜其烦.为了保证不同版本的客户端能同时兼容,在web api接口上加入版本控制就很有必 ...