浅谈jQuery使用背景
jQuery是使用原生js写成的一个库,使用简单,提高开发效率。在用js冗杂的代码解决的问题中,大部分都可以用jQuery来快速解决。
例如:
js中查询网页中ID为"d1"的标签是这样的
document.getElementByID("d1")
但是在引用了jQuery库后,代码是这样的
$("#d1")
事实显而易见,jQuery要比原生js简洁很多
jQuery引用方法
1. 直接下载文件,然后放到目录下,src指向该文件
2. CDN <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 必须联网
在jQuery中,引用方法类似python中的引用类方法,jQuery.xxx不过在这里一律使用$来替代jQuery
jQuery基础:
和原生js一样,jQuery的使用准则仍然是先查询到标签再对标签进行操作,所以查询标签依然是最重要的一点
选择器
id选择器: $("#id值")
class选择器: $(".c1")
大包大揽选择器:$("*")
标签名选择器: $("div") $("a") $("p")
组合选择器:$("#i1, p")
jQuery对象
DOM对象转换成jQuery对象
ele --> $(ele)
jQuery对象转换成DOM对象
$ele --> $ele[index]
*jQuery对象赋值给变量的时候,变量名最好以$开头,方便区分
jQuery对象:
DOM对象转换成jQuery对象
ele --> $(ele)
jQuery对象转换成DOM对象
$ele --> $ele[index]
jQuery在使用DOM方法时候一定要转换成DOM对象
DOM对象要使用jQuery方法时候一定要转换成jQuery对象
层级选择器
层级下所有子代选择器: $("选择器1 空格 选择器2")
层级下一层子代选择器: $("选择器1 > 选择器2")
毗邻选择器: $("选择器1+选择器2")
下位兄弟选择器: $("选择器1~选择器2")
筛选器
筛选器内都是在("")里面
使用方法 (":方法")
参考方法地址:http://jquery.cuishifeng.cn/find.html
属性选择器
$("input[type='text']") --> 注意:双引号里面用单引号
表单选择器
具体使用方法同筛选器,只能使用表单内的type,查询地址同上
筛选器
和上面的区别:上面的是写在引号里面的
这个是作为方法来使用的
* 括号里面都可以加选择器条件
往后找:
.next()
.nextAll()
.nextUnitl()
往前找:
.prev()
.prevAll()
.prevUntil()
往外层找:
.parent()
.parents()
.parentsUntil()
查找方法:
.find()
后代选择器: .children()
兄弟选择器: .siblings()
补充:
not:
写在引号里面的: --> $("#my-checkbox input:not(:checked)")
写在外面当方法用的 --> $("#my-checkbox input").not(":checked")
has:
写在引号内表示有什么的 --> $("label:has('input')")
写在外面当方法用的: --> $("label").has("input")
具体多种方法查询依然遵循上述地址