xiyueta案例 case2022add001

/*
$.load()    加载解析HTML  
.add()      创建一个新的 xiyueta 对象，将元素添加到匹配的元素集中
.css()      获取匹配元素集中第一个元素的CSS属性值，或者为每个匹配元素设置一个或多个CSS属性
$.html      打印HTML对象全部内容,与cheerio库里使用一致
$.log()     在浏览器里显示内容 == document.write()
*/

var html = [
    '<style>',
    '  div {',
    '    width: 60px;',
    '    height: 60px;',
    '    margin: 10px;',
    '    float: left;',
    '  }',
    '  p {',
    '    clear: left;',
    '    font-weight: bold;',
    '    font-size: 16px;',
    '    color: blue;',
    '    margin: 0 10px;',
    '    padding: 2px;',
    '  }',
    '  </style> ',
    '',
    '<div></div>',
    '<div></div>',
    '<div></div>',
    '<div></div>',
    '<div></div>',
    '<div></div>',
    ' ',
    '<p>Added this... (notice no border)</p>'
].join("\n");

xiyueta.load(html);

$( "div" ).css( "border", "2px solid red" )
  .add( "p" )
  .css( "background", "yellow" );
 
 
$.log(xiyueta.html())  
document.write(xiyueta.html())

</script>