JQquery框架

2016-12-09 08:51:50来源:CSDN作者:Munger6人点击

基本介绍


jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:
HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities
添加jQuery 库
<head><script type="text/javascript" src="jquery.js"></script></head><!--将源码导入,两个版本min版和源码版,一般看源码,用min版,效率更高--><script src="js/jQuery-2.2.2-min.js"></script>
$(".p1")的基本原理和代码
案例:封装获取元素的方法;1、将命名class  id  name传入为text2、将传入的text进行拆分 .split("");3、判断拆分后的数组的长度;【1个,2个继续判断操作个数】4、截取符号;substr(0,1);从0开始截取、一个;5、根据符号获取其中的方法是寻找id还是其他;<body>    <p id="p1">this is p</p>    <p class="p1">this is p</p>    <p class="p2 p3">this is p</p>    <p class="p2">this is p</p>    <script>        function $(text){            //将text文本进行拆分            var chooseArr = text.split(" ");            if(chooseArr.length==1){                //通过传入的符号确定要调用的方法                var ch = chooseArr[0].substr(0,1);                switch(ch){                    case "#":return document.getElementById(chooseArr[0].substr(1));                    case ".":return document.getElementsByClassName(chooseArr[0].substr(1))                    default:return document.getElementsByTagName(chooseArr[0]);                }            }else{               //继续判断传入的元素个数            }        }       console.info($(".p1"))   //打印pi调用元素        $(".p1")[0].style.backgroundColor = "red";  //通过选择元素修改器属性;    </script></body>

第二步:操作Jquery


$(function(){})特点:
1、直接在加载完了程序之后再执行内部程序
2、得到的选择元素对象object(object包含:用什么选择器,元素的值);
  • 而传统的选择器直接得到元素
/*通过jquery方式来实现的元素获取*/        $(document).ready(function(){            var op = $("#p1");            console.info(op);        });/*简写版:(可以直接获取)     $(function(){            var op = $("#p1");            console.info(op);        });

获取到元素(选择器)

通过class获得元素
<!--body端代码-->   <p id="p1">this is p</p>    <p class="p1">this is p</p>    <div></div>    <input type="text" name="username"/>    <span name="username">this is span</span>        var op2 = $(".p1");    console.info(op2);
通过ID获得元素
<!---->Js端代码    var op1 = $("#p1");    console.info(op1);

通过name获取元素

var oinp = $("[name=username]");<!---->也可以用input[name-username](可以直接调用CSS方法,限定元素类型为input  其他name一致的被排除在外)console.info(oinp);oinp.css("background-color","red");
通过标签名获取元素
var odiv = $("div");console.info(odiv);<!---->获得所有为div的元素;<!---->得到的集合,可以**实现底层自动循环,不用去找数组的个数;**
通过元素获得其子元素(表格和列表中常用)
$("#ul1 li:first-child").css("color","red");   <!---->设置ul1下面的第一个li元素的样式为颜色为红色;在选择元素的时候结合了选择器的方法;
$("#mytable tr:even").css("background-color","red");$("#mytable tr:odd").css("background-color","pink");<!---->  even为选中偶数项,从0开始;<!----> odd为选中奇数项,从0开始;

属性的操作

原始操作:
对象.属性;	对象["属性名"]   属性名当做下标 /*var op = document.getElementsByName("test")[0]; /!*对象.属性   op["下标"]*!/ console.info(op.title); console.info(op["title"]);*/
在JQUERy中得到属性:.attr(属性名,属性值);
var value = $("[name=test]").attr("title");console.info(value);<!---->传一个值为获取该属性名的值;  $("[name=test]").attr("title","test1");    传一个KEY value的方式;  传一个参数为参数properties ;  参数key,回调函数 描述:
移除属性
$("[name=test]").removeAttr("title"); <!---->移除该属性!要删除的属性名
动态添加class属性
<!---->attr方法:$("#span1").attr("class","as");<!---->addclass()方法; $("#span1").addClass("as");  //将class设置为空不调用类,
自动循环设置其class属性为index1,2,3,;
/*addClass方法设置class属性,调用方法的时候可以传递一个函数,最后返回一个值*/        $("#ul1 li").addClass(function(){            var res = "index"+$(this).index();            return res;            });    【会存在广泛增删后形成的命名一致的问题吗?】

toggleClass(“as”) 将属性class有as类的删除“as”,没有的增加;

/*toggleClass()*/$("#ul1 li").toggleClass("as");
得到元素内的某个内容
/*html(),封装了js里面innerHTML属性*/ $("#ul1").html()  <!---->修改htnl内部的所有内容: $("#ul1".html(“<li>123</li>”))
text()获取到元素内部的文本内容
$("#span1").text()
val获取所有文本框的值和js里面的属性
$("#btn").on("click",function(){   //点击之后触发事件,将文本内容打印;            var value = $("input[name=username]").val();            console.info(value);        })

筛选:避免JS和JQuery的混合使用

获取制定下标的元素
不推荐的写法:$("li")[0]	$("li").html()  $("li").eq(-1)    最后一个   $("li").eq(0)  第一个;$("li").first()  找到第一个$("li").last()  找到最后一个
hasClass() 判断当前元素是否有制定的class属性;

特点:

  • 1、有返回true 没有返回false;
var res = $("li").hasClass("li"); console.info(res);
  • 2、获取的集合返回的内容会默认返回第一个内容【.html获得第一个;text默认得到所有的元素;】
- 使用each()实现循环取出内容; $("li").each(function(){        console.info($(this).html());    });
//筛选出符合指定条件的元素;
<!--filter()从集合中筛选出符合指定条件的元素*/-->var odiv = $("div").filter(".div");    console.info(odiv);

has() 包含的方法:

<!--找到li中必须包含子元素为span的	li;--> //$("div").has(".span").css("background-color","red");

find()方法;

<!--找到子类的方法:获取元素内部(子类)符合要求的子类;-->//链式表达    $("div").find(".span").css("background-color","red");

is();

<!--用来判断是否满足指定条件;-->受限找到span,看他的父元素是否带有.box属性; var boo =$(".span").parent().is(".box");    console.info(boo);    boo = $(".box").children().is(".span");    console.info(bo

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台