码迷,mamicode.com
首页 > Web开发 > 详细

jquery选择器和属性

时间:2018-12-19 12:58:23      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:round   UNC   item   符号   aaa   bsp   gre   过滤   var   

jQuery的选择器

技术分享图片

技术分享图片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div></div>
    <div id="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div></div>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        //入口函数
        $(function(){
            //三种方式获取jquery对象
            var jqBox1 = $("#box");
                   var jqBox2 = $(".box");
            var jqBox3 = $(‘div‘);

            //操作标签选择器
            jqBox3.css(‘width‘, ‘100‘);
            jqBox3.css(‘height‘, 30);
            jqBox3.css(‘background-color‘, ‘red‘);
            jqBox3.css(‘margin-top‘, 10);


            //操作类选择器(隐式迭代,不用一个一个设置)
                    jqBox2.css("background", "pink");
                    jqBox2.text(‘hello‘)

                    //操作id选择器
                    jqBox1.css("background", "yellow");
                   
        })
    </script>
    
</body>
</html>

  技术分享图片

 

层级选择器

技术分享图片

技术分享图片

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    	li{
    		list-style: none;
    	}
    </style>
   <script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
    <script>
        $(function () {
            //获取ul中的li设置为粉色
            //后代:儿孙重孙曾孙玄孙....
            var jqLi = $("ul li");
            jqLi.css("margin",5);
            jqLi.css("background", "pink");

            //子代:亲儿子
            var jqOtherLi = $("ul>li");
            jqOtherLi.css("background", "red");
        });
    </script>
</head>
<body>
<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
</ul>
</body>
</html>

  

基本过滤选择器

技术分享图片

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <body>
        <ul>
            <li>哈哈哈哈,基本过滤选择器</li>
            <li>嘿嘿嘿</li>
            <li>天王盖地虎</li>
            <li>小鸡炖蘑菇</li>
            
        </ul>
    </body>
    <script src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            //获取第一个 :first ,获取最后一个 :last
            
            //奇数
            $(‘li:odd‘).css(‘color‘,‘red‘);
            //偶数
            $(‘li:even‘).css(‘color‘,‘green‘);
            
            //选中索引值为1的元素 *
            $(‘li:eq(1)‘).css(‘font-size‘,‘20px‘);
            
            //大于索引值1
            $(‘li:gt(1)‘).css(‘font-size‘,‘30px‘);
            
            //小于索引值1
            $(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);  
            
            $("li:first").css(‘background‘,‘red‘); //第一个
            $("li:last").css(‘background‘,‘green‘); //最后一个
            
        })

    </script>
</html>

  

 

属性选择器

技术分享图片

 

 

<html>
    <head>
        <meta charset="UTF-8">
        <title>基本过滤选择器</title>
    </head>
    <div id="box">
            <h2 class="title">属性元素器</h2>
            <!--<p class="p1">我是一个段落</p>-->
            <ul>
                <li id="li1">分手应该体面</li>
                <li class="what" id="li2">分手应该体面</li>
                <li class="what">分手应该体面</li>
                <li class="heihei">分手应该体面</li>

            </ul>

            <form action="" method="post">

                <input name="username" type=‘text‘ value="1" checked="checked" />
                <input name="username1111" type=‘text‘ value="1" />
                <input name="username2222" type=‘text‘ value="1" />
                <input name="username3333" type=‘text‘ value="1" />
                <button class="btn-default">按钮1</button>
                <button class="btn-info">按钮1</button>
                <button class="btn-success">按钮1</button>
                <button class="btn-danger">按钮1</button>


            </form>
        </div>
    <script src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
          
        $(function(){
            //标签名[属性名] 查找所有含有id属性的该标签名的元素
            $(‘li[id]‘).css(‘color‘,‘red‘);
            
            //匹配给定的属性是what值得元素
            $(‘li[class=what]‘).css(‘font-size‘,‘30px‘);
            //[attr!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素
            $(‘li[class!=what]‘).css(‘font-size‘,‘50px‘);
            
            //匹配给定的属性是以某些值开始的元素
            $(‘input[name^=username]‘).css(‘background‘,‘gray‘);
            //匹配给定的属性是以某些值结尾的元素
            $(‘input[name$=333]‘).css(‘background‘,‘greenyellow‘);
            
            //匹配给定的属性是以包含某些值的元素
            $(‘button[class*=btn]:eq(1)‘).css(‘background‘,‘red‘)
        
            
        })
    </script>

  

筛选选择器

技术分享图片

<html>

	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
	</head>

	<body>
		<div id="box">
			<p class="p1">
				<span>我是第一个span标签</span>
				<span>我是第二个span标签</span>
				<span>我是第三个span标签</span>
			</p>
			<button>按钮</button>
		</div>
		<ul>
			<li class="list">2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
	<script src="js/jquery-3.2.1.js"></script>
	<script type="text/javascript">
		$(function() {

			//获取第n个元素 数值从0开始
			$(‘span‘).eq(1).css(‘color‘, ‘#FF0000‘);

			//获取第一个元素 :first :last    点语法  :get方法 和set方法
			$(‘span‘).last().css(‘color‘, ‘greenyellow‘);
			$(‘span‘).first().css(‘color‘, ‘greenyellow‘);

			//查找span标签的父元素(亲的)
			$(‘span‘).parent(‘.p1‘).css({
				"width": ‘200px‘,
				‘height‘: ‘200px‘,
				"background": ‘red‘
			});

			//选择所有的兄弟元素(不包括自己)
			$(‘.list‘).siblings(‘li‘).css(‘color‘, ‘red‘);

			//查找所有的后代元素
			$(‘div‘).find(‘button‘).css(‘background‘, ‘yellow‘);

			//不写参数代表获取所有子元素。
			$(‘ul‘).children().css("background", "green");
			$(‘ul‘).children("li").css("margin-top", 10);

		})
	</script>

</html>

  

jQuery的属性操作

上方代码中,关键的地方在于,用了stop函数,再执行动画前,先停掉之前的动画。

jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作

  • html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()

  • DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()

  • 类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()

  • 值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()

对html属性操作

attr()

设置属性值或者 返回被选元素的属性值

	//获取值:attr()设置一个属性值的时候 只是获取值
var id = $(‘div‘).attr(‘id‘)
console.log(id)
var cla = $(‘div‘).attr(‘class‘)
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$(‘div‘).attr(‘class‘,‘box‘)
//2.设置多个值,参数为对象,键值对存储
$(‘div‘).attr({name:‘hahaha‘,class:‘happy‘})

  

removeAttr()

移除属性

//删除单个属性
$(‘#box‘).removeAttr(‘name‘);
$(‘#box‘).removeAttr(‘class‘);
//删除多个属性
$(‘#box‘).removeAttr(‘name class‘);

  

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时,则返回第一个匹配元素的值。

当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。

语法:

返回属性的值:

  
$(selector).prop(property)

设置属性和值:

  
$(selector).prop(property,value)

设置多个属性和值:

  $(selector).prop({property:value, property:value,...})
关于attr()和prop()的区别
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id=‘test‘ name="sex"  checked/>
    女<input type="radio" id=‘test2‘ name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function(){
            //获取第一个input
            var el = $(‘input‘).first();
            //undefined  因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefined
            console.log(el.attr(‘style‘));
            // 输出CSSStyleDeclaration对象,对于一个DOM对象,是具有原生的style对象属性的,所以输出了style对象
            console.log(el.prop(‘style‘));
            console.log(document.getElementById(‘test‘).style);

            $(‘button‘).click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
            


        })
    </script>
    
</body>
</html>

  

什么时候使用attr(),什么时候使用prop()?

1.是有true,false两个属性使用prop();

2.其他则使用attr();

对标签class的操作

addClass(添加多个类名)

为每个匹配的元素添加指定的类名。

  
$(‘div‘).addClass("box");//追加一个类名到原有的类名

还可以为匹配的元素添加多个类名

  
$(‘div‘).addClass("box box2");//追加多个类名
removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类(一个或多个)

  
$(‘div‘).removeClass(‘box‘)

移除全部的类

  
$(‘div‘).removeClass();

可以通过添加删除类名,来实现元素的显示隐藏

代码如下:

var tag  = false;
    $(‘span‘).click(function(){
        if(tag){
            $(‘span‘).removeClass(‘active‘)
            tag=false;
        }else{
            $(‘span‘).addClass(‘active‘)
            tag=true;
        }    
})

  

案例:

代码如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .active{
            color: red;
        }
    </style>
</head>
<body>
     <ul>
         <li class="item">张三</li>
         <li class="item">李四</li>
         <li class="item">王五</li>
     </ul>
     <script type="text/javascript" src="jquery-3.3.1.js"></script>
     <script type="text/javascript">
         $(function(){

             $(‘ul li‘).click(function(){
                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
                 $(this).addClass(‘active‘).siblings(‘li‘).removeClass(‘active‘);
             })
         })
     </script>
    
</body>
</html>

  

toggleClass

如果存在(不存在)就删除(添加)一个类。

语法:toggleClass(‘box‘)

$(‘span‘).click(function(){
    //动态的切换class类名为active
    $(this).toggleClass(‘active‘)
})

  

对值的操作

html()

获取值:

语法;

html() 是获取选中标签元素中所有的内容

$(‘#box‘).html();

 设置值:设置该元素的所有内容 会替换掉 标签中原来的内容

$(‘#box‘).html(‘<a href="https://www.baidu.com">百度一下</a>‘);

  

text()

获取值:

text() 获取匹配元素包含的文本内容

语法:

$(‘#box‘).text();
设置值:

设置该所有的文本内容
$(‘#box‘).text(‘<a href="https://www.baidu.com">百度一下</a>‘);
注意:值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中

  

val()

获取值:

val()用于表单控件中获取值,比如input textarea select等等

设置值:

$(‘input‘).val(‘设置了表单控件中的值‘);
获取input value
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form>
        男
        <input type="radio" name="sex" checked=""> 女
        <input type="radio" name="sex">
        <select>
            <option >张三</option>
            <option text=‘test‘>李四</option>
            <option>王五</option>
        </select>
    </form>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
 

    $(function() {

    	// $(‘input[type=radio]‘).get(1).checked = true;
	//设置value=2的项目为当前选中项 
	$("input[type=radio]").eq(1).attr("checked",true);
        $(‘input[type=radio]‘).change(function(event) {
            /* Act on the event */
            // console.log($(this).select());
            console.log($(this).select().prop(‘checked‘));
            var item = $("input[type=radio]:checked").val();
            console.log(item);
            // 获取select被选中项的文本
            var item2 = $("select option[selected]").text();
            console.log(item2);

        });

        $(‘select‘).change(function() {
        	   console.log($(this).val());
            //1.获取选中项的值
            console.log($(‘select‘));
            // 2.获取选中项的文本
            console.log($("select option:selected").text());
            // 或者
            console.log($("select").find("option:selected").text());

            // 3.获取选中项的索引
            console.log($("select").get(0).selectedIndex);


        });

          // 设置值: 两种方式设置值
          $("select option").get(1).selected = true;
          $("select").get(0).selectedIndex = 2;

    });
    </script>
</body>

</html>

  

对DOM文档的操作

一.插入操作

知识点1:父子之间
1.在元素内部添加,从后面放
父元素.append(子元素)
子元素.appendTo(父元素)
2.在元素内部添加,从前面放入 父元素.prepend(子元素); 子元素.prependTo(父元素);

  

  DEMO

<body>
    <div class="box1">box1</div>
    <div class="box">
        
    </div>
    <ul>
        <li>YY</li>
    </ul>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        
        $(function(){
            var oP = document.createElement(‘p‘);
            oP.innerText = ‘女朋友‘;
            oP.id = ‘tt‘
            // 1.父子之间 父.append(子)  子.appendTo(父)

            
            // 子元素 : 可以是 一个string  、jsDOM对象 、jquery对象
            $(‘.box‘).append(‘alex‘);//可以插入普通的文本
            $(‘.box‘).append(‘<h2>yy</h2>‘);//可以插入标签+文本
            $(‘.box‘).append(oP); //插入一个jsDom对象
            $(‘.box‘).append($(‘.box1‘)); //如果插入的是一个jquery对象 相当于是一个移动操作

            $(‘<p>xx</p>‘).appendTo(‘.box‘).click(function(event) {
                $(this).css({
                    width:100,
                    height:100,
                    backgroundColor:‘red‘
                }).text(‘zz‘);

            });;

            // prepend()   prependTo()
            //1. prepend() 插入 子级的第一个元素
            $(‘ul‘).prepend(‘<li>WW</li>‘);
            $(‘<li>XX</li>‘).prependTo(‘ul‘).click(function() {
                alert(this.innerText);
            });
            // jquery有链式编程 简化我们的代码
        });
    </script>
    
</body>
技术分享图片

 

知识点2:兄弟之间
兄弟元素.after(要插入的兄弟元素);
要插入的兄弟元素.inserAfter(兄弟元素);
兄弟元素.before(要插入的兄弟元素);
要插入的兄弟元素.inserBefore(兄弟元素);

demo

<body>
    <ul>
        <li class="item">alex</li>
    </ul>

    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
     <script type="text/javascript">
    $(function() {
        // es6的模板字符串   tab键 上面那个符号  反引号 ``,使用${变量名} 插入变量
        var title = "百度";
        $(‘.item‘).after(`<li>
            <a href="#">${title}</a>
        </li>`);

    $(‘<li>wusir</li>‘).insertAfter(‘.item‘);

    // before
    var title1 = "小米";
     $(‘.item‘).before(`<li>
            <a href="#">${title1}</a>
        </li>`);
     $(‘<li>XX</li>‘).insertBefore(‘.item‘);

    });
    </script>
</body>

技术分享图片

二、替换操作

$(selector).replaceWith(content);
//将所有匹配的元素替换成指定的string、js对象、jquery对象。
//将所有的h5标题替换为a标签
$(‘h5‘).replaceWith(‘<a href="#">hello world</a>‘);
//将所有h5标题标签替换成id为app的dom元素
$(‘h5‘).replaceWith($(‘#app‘));


$(‘<p>哈哈哈</p>‘).replaceAll(‘h2‘);
解释:替换所有。将所有的h2标签替换成p标签。

三、删除操作

$(selector).remove(); 
解释:删除节点后,事件也会删除(简言之,删除了整个标签)
$(‘ul‘).remove();

$(selector).detach(); 
解释:删除节点后,事件会保留
 var $btn = $(‘button‘).detach()
 //此时按钮能追加到ul中
 $(‘ul‘).append($btn)

demo

<body>
    <div class="box">
        <p style="font-size: 20px;font-weight: 600;">alex</p>
    </div>
    <button>删除</button>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
    $(function() {

        $(‘button‘).click(function() {
              alert(1);
            // remove() 删除节点后 事件也会删除  删除了整个标签
            // console.log($(this).remove());
            // var jqBtn = $(this).remove();
            // $(‘.box‘).prepend(jqBtn);


            // detach() 删除节点后 事件会保留
            // var jqBtn = $(this).detach();
            // $(‘.box‘).prepend(jqBtn);
            $(‘.box‘).empty();

        })
    });
    </script>
</body>

 

  

 

jquery选择器和属性

标签:round   UNC   item   符号   aaa   bsp   gre   过滤   var   

原文地址:https://www.cnblogs.com/xiao-apple36/p/10117419.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!