当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JQuery基础总结二：样式篇

JQuery基础总结二：样式篇

2018年11月11日  | 移动技术网IT编程  | 我要评论

基础-样式篇

1.引入

<!doctype html>

<html>

<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <!-- 开发版 -->

    <script type="text/javascript" src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>;

    <title>环境搭建</title>

</head>

<body>

    <script type="text/javascript"> alert($) </script>

</body>

</html>

2.获取特定dom节点

$('*')  所有元素引用

$('p')   所有p的引用

$('#idname')  获取id为idname的引用

$('.classname')  获取class为classname的引用

$(this)    把js里的this指针包装成jq对象

3.操作节点（可以连续操作节点）

$('#idname').html();  获取html文档结构

$('#idname').html('this is the new content!');  重写html文档结构

$('#idname').text();  获取文本内容

$('#idname').text('this is the new content!');  重写文本内容

$('#idname').val();  获取value值（表单元素的）

$('#idname').val('new value');  重置value值（表单元素的）

$('#idname').css('color','red');   重置样式

$('p').get(0);   获取第一个p（返回html对象）

$('p').eq(0);   获取第一个p（返回jq对象）

$('input:checkbox').attr('checked','true');   设置属性

$('input:checkbox').attr('checked');   获取属性

$('input:checkbox').removeattr('checked');   删除属性

4.事件

//页面加载完成

$(document).ready(function(){

        //code

);

5.js-jq对象转换（有$符号的是jq对象，没有的为原生js对象）

jq转js:

    var $p = $('p');

        var p = $p.get(3);

        p.style.color = 'red';

js转jq:

         var p = document.getelementsbytagname('p'); 

         var $p = $(p);

         $p.first().css('color', 'red'); 

6.相关节点

$('p > p')   选择p元素里第一层p元素

$('p     p')   选择p元素里所有的p 元素

$('p + p')   选择p元素后第一个兄弟节点

$('p ~ p')   选择p元素后的所有兄弟节点

7.jq延伸-基本选择器

$(':first') 匹配到的第一个元素

$(':last')  匹配到的最后一个元素

$(':not(selector)') 一个用来过滤的选择器，选择所有元素出去不匹配给定的选择器元素

$(':eq(index)') 在匹配的集合钟选择索引值为index的元素

$(':gt(index)') 选择匹配集合钟所有大于给定index的元素

$('  :lt(index)')  选择匹配集合中索引值小于给定index的元素

$(':even') 选择索引值为偶数的元素，从0开始计数

$(':odd')  选择索引值为奇数的元素，从0开始计数

$(':header') 选择所有标题元素，像h1,h2,h3等

$(':lang(language)')  选择指定语言的所有元素

$(':root') 选择该文档的根元素

$(':animated') 选择所有正在执行动画的元素

8.jq延伸-内容选择器

$(':contains(text)')  选择所有包含指定文本的元素

$(':parent')  选择所有含有子元素或者文本的元素

$(':empty')  选择所有没有子元素的元素（包含文本节点）

$(':has(selector)')  选择元素中至少包含指定选择器的元素

9.jq延伸-可见性选择器

$(':visible')  选择所有显示元素

$(':hidden')  选择所有隐藏元素

9.jq延伸-属性选择器

$("[attribute|='value']")  选择只当属性值等于给定字符串或者以该字符串为前缀的元素（以 -  为连接符）

$("[attribute*='value']")   选择我指定属性具有包含给定子字符串的元素

$("[attribute~='value']")   选择指定属性用空格分隔的值中包含一个给定值的元素

$("[attribute='value']")     选择指定属性是给定值的元素

$("[attribute!=value']")     选择不存在指定属性，或者指定的属性值不等于给定值的元素

$("[attribute^='value']")    选择指定属性是以给定字符串开始的元素

$("[attribute$='value']")    选择指定属性是以给定字符串结尾的元素，区分大小写

$("[attribute]")                  选择所有具有指定属性的元素，给属性可以是任何值

$("[attribute1][attribute2]")   选择匹配所有指定的属性筛选器的元素

10.子元素筛选选择器

$(':first-child')  选择所有父级元素下的第一个子元素

$(':last-child')   选择所有父级元素下的最后一个子元素

$(':only-child')  如果某个元素是其父元素的唯一子元素，那么他就会被选中

$(':nth-child(n)') 选择的他们所有父元素的第n个子元素

$(':nth-last-child(n)')   从末尾开始，选择第n个子元素

11.表单元素选择器

$(':input')   选择所有input,textarea,select和button元素

$(':text')   匹配所有的文本框

$(':password')   匹配所有的密码框

$(':radio')     匹配所有的单选

$(':checkbox')   匹配所有的复选框

$(':submit')   匹配所有提交按钮

$(':image')  匹配所有的图像域

$(':reset')   匹配所有的重置按钮

$(':button')  匹配所有按钮

$(':file')   匹配所有文本域

 12.表单对象属性筛选选择器

$(':enabled')  选取可用表单元素

$(':disabled') 选取不可用表单元素

$(':checked')  选取被选中的<input>元素  （建议使用 input:checked选择器）

$(':selected')  选取被选中的<option>元素     

13.添加样式

$('p').addclass(classname)    添加类

$("p").addclass(function(index,classname) {

            //找到类名中包含了imooc的元素

            if(-1 !== classname.indexof('imooc')){

                //this指向匹配元素集合中的当前元素

                $(this).addclass('imoocclass')

            }

});

14.删除样式

$('p').removeclass(classname)  删除类

$('.right > p:first').removeclass(function(index,classname){

            //classname = aa bb imoocclass

            //把p的classname赋给下一个兄弟元素p上作为它的class

            $(this).next().addclass(classname)

            //删除自己本身的imoocclass

            return 'imoocclass'

        });

15.样式切换

$('p').toggleclass(classname);    有则删除类，无则加上类

$('p').toggleclass(classname,true);    true则p应该保存类，false则删除类

16.操作css

$('p').css('color')   获得计算后的color值

$('p').css(['color','position']);  获取多个css值

$('p').css('color','red');   设置color值

$('p').css({'color':'red','position':'absolute'});   传入一个对象，同时设置多个样式

17.数据存储

$('.right').click(function() {

        var ele = $(this);

        //通过.data方式设置数据

        ele.data("a", "data test")     //设置key | value

        ele.data("b", {

            name: "慕课网"

        });

        //通过.data方式取出数据

        var reset = ele.data("a") + "</br>" + ele.data("b").name

        ele.find('span').append(reset);//添加元素

    })

其他

//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$('input:not(:checked) + p ').css("background-color", "#cd00cd");

//查找所有class='p'中dom元素中包含"contains"的元素节点并且设置颜色

$(".p:contains(':contains')").css("color", "#cd00cd");

//查找所有class='p'中dom元素中包含"span"的元素节点并且设置颜色

$('.p:has(span)').css("color", "blue");

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网