JQuery 就是一些方法的封装,类似 jar 包。
导入后,能够直接调用的方法。
1. 导入 js 文件
代码如下:
一般导入压缩包,源码留给自己看吧(0 _ 0)。
2. 常用的方法介绍 window.onload 类似方法
- $(document).ready(function() {}); //这个相当于window。onload = functions(){};
等待系统载入完全才执行的代码。
选择器相关方法
jquery 中封装了 document.getElementBy??? 方法。
导入 jquery 后可以直接通过:
1. 通过 id 获取对象。
- var op1 = $("#p1");
2. 根据 class 获取元素
- var op2 = $(".p1");
3. 通过 name 属性获得元素
- var ospan= $("span[name = span]");
4. 通过标签名字获得元素
- var odiv = $("div");
5. 选中元素的子元素
- $("#ul li:first-child")
- /*先通过id ul 找到ul,再找到ul下面第一个li*/
6. 对于表格选择的操作。
- $("#mytable tr:even") $("#mytable tr:odd")
偶数行 even 奇数行 odd。
对于属性的操作
1. 得到属性的值,设置属性。
方法采用 对象. attr()
一个参数是获取属性值,两个参数是设置属性值 (第一个是属性名字,第二个就是值。)
eg:
- $("[name=test]").attr("title","text1");
2. 移除属性(直接移除,不是设置为空)
通过对象. removeAttr("属性名称");
eg:
- $("[name=test]").removeAttr("title");
3. 动态添加 class 属性。
采用
第一种:对象. attr("class","sk");
第二种:对象..addClass("sk");
addclass 是设置 class 属性,调用方法的时候 可以传递一个函数,最后必须返回一个值就可以了。
——–sk 是 class 值。
4. 把 class 属性设置为空,不是移除。
对象. removeClass();
5. 反向操作 0。0—-toggleClass()
传入的参数是如果之前对象的 class 中有 xxx,就把 xxx 去掉,如果没有,就给原来的加上 xxx
eg:
- $("#ul1 li").toggleClass("as");
- /*给所有的li中class没有as的加上,有as的去掉*/
6. 获取元素中所有的文本内容
对象. text()。
eg:
- $("#span1").text();
7. 获取元素内部的 html 语句。
对象. html();
html 方法, 封装了 js 里面的 innerHTML 属性,如果传了参数就是用传入的去替换里面的。
eg:
- $("#ul1").html($("万岁");
8. 获取输入框中的值。
输入框对象. val();
eg:
- $("input[name=username]").val()
筛选元素
1. 获取到集合中指定下标的元素。
eg:
- $("li").eq(1);
- /*这个$("li")找出来肯定是一个集合,然后调用eq(i)传入一个下标值,即可获得指定下标的元素。*/
2. 获得第一个,最后一个元素。
eg:
- $("li").first();
- $("li").last();
3. 判断元素是否有指定 class 属性。
采用 hasClass 方法。
eg:
- $("li").hasClass("sk");
hasClass 用来判断当前元素是否有指定的 class 属性, 有就返回 true,没有就返回 false。
jquery 获取到一个集合,取出集合中的内容,默认返回第一个值的内容
但是。text() 方法有特性。会返回集合中的所有内容。
4. 循环取出内容。
采用 each 方法
eg:
- $("li").each(function() {
- $(this).html(); //这里就相当于循环操作 });
5. 筛选出符合指定条件
采用 filter 方法,filter 从集合中筛选出符合指定条件的元素。
eg:
- $("div").filter(".box").attr("style", "width:200px ;height:200px ;background :red");
- /*从div集合中找到有class属性为box的div,然后设置样式,链式操作。*/
6. 找到包含 xx 的元素
采用 has 方法。
has() 包含: 获取到元素内部 (不仅指子元素,孙元素也要算上) 的条件是否符合要求,最终操作的还是前面的是那个
eg:
- $("div").has(".span").CSS("border-radius", "30px");
- /*找到div集合中包含有class 为span的div。设置div样式*/
7. 找到 xxx 元素。
eg:
- $("div").find(".span").css("border", "5px solid black");
- /*其实感觉这段代码前面完全可以用$(".span")来获取,不过这个方法要了解*/
find() , 针对的是子类,操作的也是子类。
8.is 方法。判断是否是 xxx
eg:
- $(".span").parent().is(".box")
- /*判断找到的span的父类是不是用class =box属性来知道的元素,是就返回true,不是就返回false*/
- $(".box").children().is(".span")
就爱阅读 www.92to.com 网友整理上传, 为您提供最全的知识大全, 期待您的分享,转载请注明出处。
来源: