[TOC]
jQuery:针对JS的方法封装
目的:大量简化JS的代码
Jquery学习官网地址:https://jquery.cuishifeng.cn/
Jquery的js文件下载地址:https://www.bootcdn.cn/
ID选择器:等同于document.getElementById(“id”)(注意要添加#符号)
- / ID选择器 /
- var d1 = $(‘#d1’);
- d1.css({
- “width”:”200px”,
- “height”:”200px”,
- “background”:”red”
- });
- console.log(d1);
类选择器:
- / 类选择器 /
- var d1 = $(‘.c1’);
- d1.css({
- “width”:”200px”,
- “height”:”200px”,
- “background”:”red”
- });
- console.log(d1);
标签选择器
- / 标签选择器 /
- var d1 = $(‘div’);
- d1.css({
- “width”:”200px”,
- “height”:”200px”,
- “background”:”red”
- });
- console.log(d1);
并集选择器(多个类别选择)
- / 并集选择器 /
- var d1 = $(‘.c1,.c2’);
- d1.css({
- “width”:”200px”,
- “height”:”200px”,
- “background”:”red”
- });
- console.log(d1);
位置筛选器
- var fli = $(‘li’).first();//获得第1个li元素
- console.log(fli.text());
- var lli = $(‘li’).last();//获得最后1个li元素
- console.log(lli.text());
- var xli = $(‘li’).eq(2);//获得第3个li元素
- console.log(xli.text());
- var gli = $(‘li:gt(2)’);//获得下标大于2以上的所有li元素
- console.log(gli.text());
内容筛选器
- 成都,你好!
- 深圳,你好!
- 成都,你好!
- 上海,你好!
- 深圳,你好!
- / 内容筛选器 /
- var arrs = $(“div:contains(‘深圳’)”);
- console.log(arrs.text())
亲属筛选器
- /* 获得所有子标签 children()
- children(“ol”) 指定获得某些子标签
- */
- var chs = $(‘#d1’).children(“ol”);
- console.log(chs);
- / 得到直接父标签,以及父标签所有的子标签 /
- var p = $(‘#d1’).parent();
- console.log(p);
- /* 需要获得祖先元素 parents()
- parents(“#ye”) 指定获得某些祖先标签
- */
- var ye = $(‘#d1’).parents(“#ye”);
- / 需要获得祖先元素 /
- console.log(ye);
属性筛选器
- / 属性筛选器 /
- var hobbies = $(‘input[name=”hobbies”]’);
- / 数组的遍历: i 代表下标,n 代表内容 /
- $.each(hobbies,function(i, n){
- if(n.checked){
- console.log(“Item #”+ i +”: “+ n );
- }
- });
表单筛选器
- $(“:checkbox”);//得到所有的复选框
- $(“:button”);//得到所有的按钮
- $(“:submit”);//得到提交按钮
- $(“:reset”);//得到重置按钮
- $(“:input”);//得到所有的输入框,textarea ,button,select
事件绑定(使用on函数进行绑定)
1、
- / 替代window.onload=function(){} /
- $(function($){
- //给按钮1,添加事件
- $(“#btn01”).on(“click”,function(){
- console.log(“One”);
- });
- //给按钮2,添加事件
- $(“#btn02”).on(“dblclick”,function(){
- console.log(“Two”);
- });
- });
2、
- / 替代window.onload=function(){} /
- $(function($){
- $(“#btn01”).click(function(){
- console.log(“One”);
- });
- $(“#btn02”).dblclick(function(){
- console.log(“Two”);
- });
- });
jQuery的动画效果