例 1. 添加, 删除 class
知识要点:
1. 通过 < script src='jQuery-1.12.4.JS></script > 调用 jQuery
2. 相对于 Dom 的 document.getElementbyID('i1'), jQuery 直接使用 $('#i1');
类似的, 查找类可以用 $('.c1'), 查找 p 标签 $('p'), 查找 form 的元素 $(':text') , 还可以组合使用. 具体的选择器可以参考 https://www.w3schools.com/jquery/jquery_ref_selectors.asp
3. addclass('hide')直接给找到的标签添加一个样式 class,removeClass('hide')删除一个 class, 无需使用 classlist 了
[html] 纯文本查看
- ? http://bbs.itheima.com/#
- 123
百度
点击 hide 按钮切换隐藏效果
例 2. 全选和反选
这个例子在前面的 Dom 里面出现过, 现在看看 jQuery 如何实现
知识点:
1. 选择器可以组合使用 比如 $('#tb :checkbox') 表示 id=tb 下面所有的 checkbox 元素
2. 对于 checkbox 的属性, 通过 prop()来实现, 如果是自定义的其他的属性, 通过 attr()实现
3. each()可以实现循环, 循环里面如果输出 this, 可以看见他是一个 dom 的格式, 如果把他转换成 jQuery 对象的格式 (数组格式), 可以通过 $(this) 实现, 如果想把 jQuery 转为 dom 的格式, 那么直接取第一个数组的值就行了, 例子里面实现了 3 种方式, dom,jQuery 以及三元运算符的格式
[HTML] 纯文本查看
? http://bbs.itheima.com/#
选项 IP PORT
- 1.1.1.1 80
- 1.1.1.1 80
- 1.1.1.1 80
例 3 隐藏菜单
知识点:
1. click 的事件可以直接选择到标签之后执行, 这个比在 HTML 里面使用 onclick 事件要好很多.
2. jQuery 支持链式的编程, 因此如下所示可以一行实现很多功能
[HTML] 纯文本查看
? http://bbs.itheima.com/#
标题一
标题二
标题三
例 4. 复制, 删除文本框
clone()克隆标签
find()查找标签
attr()添加一个事件
[HTML] 纯文本查看
- ? http://bbs.itheima.com/#
- +
效果: 点击 + 自动复制一行, 点击 - 删除自己所在
例 5. 绑定事件 - 例 2 的升级版
例 2 里面我们需要给每个标签都手动的添加 onclick 事件, 如果可以统一绑定事件, 会省事很多. 有两种方式, 如下所示;
- $(function){
- ....
}里面执行的... 会在文档树加载之后自动执行, 不会等待所有的图片内容的加载
[HTML] 纯文本查看
? http://bbs.itheima.com/#
菜单一
内容一
内容一
内容一
内容一
内容一
菜单二
菜单三
例 6 事件的延迟绑定
比如通过 JavaScript 创建的新标签, 如何让他自动绑定事件? 可以通过 delegate 实现
[HTML] 纯文本查看
- ? http://bbs.itheima.com/#
- 123
- 456
- 789
例 7 模态对话框 (高级版)
之前用 DOM 实现过模态对话框, 现在用 jQuery 实现同样的功能.
知识要点:
1. 模态对话框的 HTML 和 CSS 布局, 3 层, 最上层居中, 中间一个阴影层, 最下面是主界面, 上面两层默认隐藏, 通过 z-index 区分上下顺序
2. 可以通过 attr()方法来获取和设置自定义的属性; 如果是 checkbox 或者 radio, 那么通过 prop()方法来获取和设定属性
3. 通过属性来定位元素, 比如 $("[editable='false']")则可以获取 editable 属性为 false 的那个标签元素
4. 文本编辑, 对于 InnerText 的值是通过 text()实现, 对于 input 的表单内容则是通过 val()实现
5. 添加 class, 删除 class 通过 addClass()和 removeClass()实现
[HTML] 纯文本查看
? http://bbs.itheima.com/#
添加
1.1.1.11 80 80
编辑 | 删除
1.1.1.12 80 80
编辑 | 删除
1.1.1.13 80 80
编辑 | 删除
1.1.1.14 80 80
编辑 | 删除
6. delegate 延迟绑定的实现, 一般用于未来的新的标签, 比如通过脚本创建的标签
7. 动态的创建标签, 可以直接插入 HTML 字符串或者通过 CreateElement()实现
文章摘自: https://blog.51cto.com/beanxyz/1893396
来源: http://www.bubuko.com/infodetail-3414172.html