2.jQuery学习笔记第二节/Jq的设计思想之选择元素
2016-04-09 本文已影响225人
iplaycodex
jQuery学习笔记第二节/Jq的设计思想之选择元素
1.jQuery的设计思想
- 选择网页元素
- 模拟 CSS 选择符
- 独有表达式的选择
- 多种筛选的选择
- Jq 的写法
- 方法函数化,在 JQ 中使用"="就很少了,因为方法都函数化了.
- 链式操作.Jq 很吊的一点就是可以链式操作,对于一个元素的操作都可以写在一行里面.吊吊的
- 取值赋值合体,一般在一个方法中.一个参数就是取值,两个参数就是赋值.
- Jq 和 Js 的关系
- 可以混编.而且混编是一种很爽的编码方式.但是有一点需要注意:就是千万不可以乱调 API,意思就是 JS 对象不可以调用 JQ的方法,JQ对象不可以调用 JS 的方法,这个是一定要切记的!
可以看到使用 JQ 的来进行元素的选择更加的迅速和方便了,并且兼容性更好,减少了很多的不必要的繁琐的 JS 操作.
2.Jq 库文件的导入问题
上一份的笔记是使用下载的 JQ 文件,这里就不在下载了.推荐使用CDN来完成 JQ的库文件的加载.
注意:
Jq是有版本的,如果需要兼容 IE67.8的话,那么就只能使用低版本的 Jq库文件
3.关于 Jq 选择器的简单了解
- 1.js 选择元素的方式
1.//这里我们先看看JS 选择元素的方法,参考下面的代码
2.<!DOCTYPE html>
3.<html>
4. <head>
5. <meta charset="UTF-8">
6. <title>原生 JS 操作元素</title>
7. </head>
8. <body>
9. <div id="frist_div">
10. 我是第一个div
11. </div>
12. <div class="second_div">
13. 我是第二个div
14. </div>
15. <ul class="out_Li_list">
16. <li class="inner_li">
<a href="http://www.baidu.com">百度一下,你就知道</a>
</li>
17. </ul>
18. </body>
19. <script type="text/javascript">
20. var frist_element = document.getElementById("frist_div");
21. var second_element =document.getElementsByClassName("second_div");
22. var thind_element = document.getElementsByTagName("li");//这里获取到的是一个集合.
23. </script>
24.</html>
可以看到使用 JS 来获取元素是一个很麻烦的事情.需要调用的方法很长而且如果获取的是一个集合的话,还需要进行一个 for 循环来进行遍历.
- 2.使用 Jq 来进行元素的选择
<script type="text/javascript">
//这里代码快使用 JQ 来进行元素的获取
var $div_one = $("#frist_div");
var $div_two = $(".second_div");
var $inner_li = $(".out_Li_list>li"); //这里获取的是 UL下面的所有的li.
var $li_element = $(".inner_li"); //单独的 li.
</script>
我们可以发现使用 JQ 来进行元素的选择是一个非常简单的事情,代码很少了.被封装的很简单.
4.一个简单的总结
jQuery的广义语法.png
其实 Jq 很简单,首先第一步就是选中某个元素,然后就是给这个元素执行某些 action即可.
好了.今天的 B 就装到这里.再见
